vue模态框怎么实现的,vue弹出模态框dialog
这篇文章主要为大家详细介绍了某视频剪辑软件自定义模态对话框弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件自定义模态对话框弹窗的具体代码，供大家参考，具体内容如下
模态对话框弹窗效果：
父组件（应用页面)主要代码：
模板
view class=app-container
模式对话框showText=确定要取消收藏吗？:isShowDialog= is dialog @ cancel= is dialog=false @ confirm=确认删除/modal-dialog
/查看
/模板
脚本
从" @/components/modalDialog.vue "导入模态对话框
导出默认值{
组件：{
模态对话框
},
data() {
返回{
isDialog:假，
}
},
方法：{
//业务代码.
this.isDialog=false
}
}
/脚本
子组件（自定义组件)代码：
模板
视角
view class= global-mask v-show= isShowDialog /view
view class= global-dialog v-show= isShowDialog style= top:45%；
view class=title 温馨提示/查看
view class=content
view class= text " { show text } }/view
/查看
视图class=btn
view class= left @ tap= cancel v-if= isShowCancel { { cancel text } }/view
view class= right @ tap= confirm v-if= isShowConfirm { { confirm text } }/view
/查看
/查看
/查看
/模板
脚本
导出默认值{
名称：“modalDialog”，
道具：{
showText: {
类型：字符串，
默认值： 提示内容
},
isShowDialog: {
类型：布尔型，
默认值：错误
},
isShowCancel: {
类型：布尔型，
默认值：真
},
取消文本：{
类型：字符串，
默认值： 取消
},
isShowConfirm: {
类型：布尔型，
默认值：真
},
确认文本：{
类型：字符串，
默认值： 确定
}
},
data() {
返回{
};
},
方法：{
取消(){
这个. emit(" cancel ")；
},
确认(){
这个$emit(确认);
}
}
}
/脚本
样式lang=scss 。全局掩码{
位置：固定；
top:0；
左：0;
z指数：998;
宽度：100%;
身高：100%;
背景：rgba($color: #000000，$ alpha:0.3)；
}。全局对话框{
位置：固定；
顶配：500rpx
左：60rpx
top:45%；
z指数：999;
宽度：630rpx
背景：# FFFFFF
边框半径：15rpx
溢出：隐藏；标题{
字体大小：36rpx
字体粗细：500;
文本对齐：居中；
行高：100rpx
垫底：10rpx
}。内容{。文本{
字体大小：32 rpx
文本对齐：居中；
垫底：40rpx
}。表单{
填充：0 40rpx。项目{
显示器：flex
对齐-项目：居中；
justify-content:space-between；
边距-底部：40rpx
输入{
宽度：340rpx
高度：60rpx
边框：1px固体# eaeaea
边框半径：10rpx
填充：0 20rpx
}
}
}
}。btn {
border-top:1px solid # eaeaea；
显示器：flex
视图{
flex:1；
文本对齐：居中；
行高：100rpx
字体大小：32 rpx。左侧{
颜色：# 666666;
}。右{
颜色：# FFFFFF
背景：# FF3F42
}
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。