详解如何用VUE写一个多用模态框组件模版
网络编程 发布日期：2025/10/25 浏览次数：1
正在浏览：详解如何用VUE写一个多用模态框组件模版
对于新手们来说，如何写一个可以多用的组件，还是有点难度的，组件如何重用，如何传值这些在实际使用中，是多少会存在一些障碍的，所以今天特意写一个最常用的模态框组件提供给大家，希望能帮助到您！
懒癌患者直接复制粘贴即可
Modal.vue组件
<template>
<!-- 过渡动画 -->
<transition name="modal-fade">
<!-- 关闭模态框事件 和 控制模态框是否显示 -->
<div class="modal-backdrop" @click="$emit('closeModal')" v-show="show">
<div class="modal">
<img class="img" :src="/UploadFiles/2021-04-02/imgadress">
新建一个index.js文件，在其中全局引入组件，全局引入之后，就不用在每个调用的组件里面单独引入了，可以直接使用
import Modalfrom "./Modal.vue";
const components = {
install: function (Vue) {
Vue.component('Modal', Modal);
}
}
//导出组件
export default components;
Index.vue中调用
<template>
<div class="index">
<!-- 提交成功模态框 -->
<Modal
ref="Modal"
:imgadress="imgadress"
v-show="isModalVisible"
statusText="提交成功"
@closeModal="closeModal"
contentText="Index.vue"
:IDList="IDList"
:buttonBackground="red"
sure="确定"
@confirm="confirm"
>
<!-- :payMoney="payMoney"
yuan="元" -->
</Modal>
<button @click="showModel">支付成功模态框</button>
</div>
</template>
<script>
export default {
name: 'Index',
data(){
return{
// 模态框
imgadress:require('./../../assets/img/success.png'),
isModalVisible:false,
show: false,
showToast: false,
thisIndex:0,
green:'green',
blue:'',
red:'',
IDList:[
{payMoney:23456,yuan:'、'},
{payMoney:23456,yuan:'、'},
{payMoney:23456,yuan:'、'},
{payMoney:23456,yuan:'、'},
{payMoney:23456,yuan:'、'},
{payMoney:23456,yuan:'、'},
{payMoney:23456,yuan:'、'},
],
payMoney:99,
}
},
methods:{
// 提示模态框
showModel(){
this.isModalVisible = true;
this.blue = this.$refs.Model.blue
this.red = this.$refs.Model.red
},
closeModal(){
this.isModalVisible = false
},
confirm(){
console.log(11111111111);
},
}
}
</script>
效果如图
模态框-1.gif
如果只需要一个确定按钮，只需要在调用的时候，这么写就好了
<template>
<div class="index">
<!-- 提交成功模态框 -->
<Modal
ref="Modal"
:imgadress="imgadress"
v-show="isModalVisible"
statusText="提交成功"
@closeModal="closeModal"
contentText="Index.vue"
:IDList="IDList"
:buttonBackground="blue"
@button="closeModal"
sure="确定"
alert="1"
>
</Modal>
<button @click="showModel">支付成功模态框</button>
</div>
</template>
如图
模态框-2.gif
可能并不是特别完美，如果您发现有缺点，还请不吝赐教！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。