vue3全局弹窗组件,vue弹框组件怎么复用
这篇文章主要为大家详细介绍了某视频剪辑软件自定义全局组件实现弹框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件自定义全局组件实现弹框案例的具体代码，供大家参考，具体内容如下
说明：本案例是封装的一个弹框页面，因为只想要一个遮罩，内容自定义。因为ElementUI上已经提供了一个弹框组件，但觉得elementUI的组件内容有点多，所有自己就封装了全局组件。自己封装的参考了elementUI组件的源码。
主要步骤如下
1.创建一个文件夹我的对话框
2.在我的对话框文件夹下创建MyDialog.vue和索引。射流研究…
索引. js需要引入MyDiloag并封装和抛出
4.在主页。射流研究…中引入索引。射流研究…
主要代码如下
1、MyDialog.vue
模板
过渡
name=dialog-fade
@after-enter=afterEnter
@after-leave=afterLeave
div v-show=visible
div class=md-wapper
/div
div class= MD-content @ click。self=处理掉
插槽/插槽
/div
/div
/过渡
/模板
脚本
导出默认值{
名称："我的对话框",
data(){
返回{
}
},
道具：{
可见：{
类型：布尔型，
默认值：错误
},
closenclickmodal:{
类型：布尔型，
默认值：真
},
},
方法：{
afterEnter(){
},
休假后(){
},
handleOut(){
//this.visible=false
如果(这个。closenclickmodal){
这个发出( closeMyDialog )
}
}
},
}
/脚本
样式范围语言=少。md-wapper{
z指数：10;
位置：固定；
左：0;
top:0；
宽度：100%;
身高：100%;
不透明度：5;
背景：# 000;
}。MD-内容{
z指数：11;
位置：固定；
左：0;
top:0；
宽度：100%;
身高：100%;
}
/风格
2、index.js
从导入我的对话./我的对话框；
我的对话。安装=功能(Vue){
Vue.component(MyDialog.name，我的对话框)；
};
导出默认的我的对话
3、在主页。射流研究…中引入
//引入自定义弹框组件
从" @/公共/我的对话框/索引"导入我的对话
Vue.use(我的对话框)
4、在项目中使用
模板v-否则
div class=ds-bg
我的对话框：visible=true
div class=da-sty
div class=da-show
div class=" da-name "
我要报名
/div
/div
/div
/我的对话框
/div
/模板
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。