vue文本框组件,vue弹窗组件
这篇文章主要为大家详细介绍了某视频剪辑软件对话框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件对话框组件的使用，供大家参考，具体内容如下
效果如下图所示：(整体样式模仿蚂蚁设计模型样式，同时阴影覆盖浏览器窗口)
创建组件对话框。vue:
模板
div class=m-dialog-mask
“多模态”
div class=m-modal-content
div @ click= on close class= u-close # 10006；/div
div class=m-modal-header
div class=u-head{{ title }}/div
/div
div class=m-modal-body
p{{ content }}/p
/div
div class= m-modal-footer v-show= footer
button class= u-cancel @ click= on cancel { { cancel text } }/button
button class= u-confirm @ click= on confirm { ok text } }/button
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称："对话框",
道具：{
标题：{ //标题
类型：字符串，
默认值： 提示
},
内容：{ //内容
类型：字符串，
默认值：""
},
cancelText: { //取消按钮文字
类型：字符串，
默认值： 取消
},
okText: { //确认按钮文字
类型：字符串，
默认值： 确定
},
页脚：{ //是否显示底部按钮，默认显示
类型：布尔型，
默认值：真
}
},
方法：{
onClose () {
这个发出(关闭)
},
onCancel () {
这个$emit(取消)
},
onConfirm () {
这个$emit(确定)
}
}
}
/脚本
style lang=less 范围。间位对话框-掩码{
位置：固定；
top:0；
右：0;
底部：0;
左：0;
宽度：100%;
身高：100%;
z-index:1000000；
背景：rgba(0，0，0，0.45)；多模态{
宽度：720像素
位置：相对；
top:calc(50%-240 px)；
边距：0自动；间位模态-内容{
位置：相对；
背景：# fff
边框-半径：4px
方框阴影：0 4px 12px rgba(0，0，0，1);u-close {
位置：绝对；
top:16px；
右：24px
颜色：rgba(0，0，0，45);
字体大小：18px
行高：22px
光标：指针；
过渡：颜色。3s；
：悬停{
颜色：rgba(0，0，0，75);
}
}。m-modal-header {
高度：22px
填充：16像素24像素
颜色：rgba(0，0，0，65);
border-radius:4px 4px 0 0；
border-bottom:1px solid # e8e 8；u形头{
边距：0;
颜色：rgba(0，0，0，85);
字体粗细：500;
字体大小：16px
行高：22px
自动换行：断字；
}
}。间位模态-车身{
身高：324px
填充：24px
字体大小：16px
行高：1.5;
自动换行：断字；
}。间位模态-页脚{
填充：10px 16px
文本对齐：右对齐；
border-top:1px solid # e8e8e 8；你-取消{
高度：32px
行高：32px
填充：0 15px
字体大小：16px
边框-半径：4px
颜色：rgba(0，0，0，65);
背景：# fff
边框：1px纯色# d9d9d9
光标：指针；
过渡：所有。3s三次贝塞尔曲线(.645,045,355,1);
：悬停{
颜色：# 40 a9 ff
边框-颜色：# 40 a9 ff
}
}。确认{
左边距：8px
高度：32px
行高：32px
填充：0 15px
字体大小：16px
边框-半径：4px
背景：# 1890ff
边框：1px纯色# 1890ff
颜色：# fff
过渡：所有。3s三次贝塞尔曲线(.645,045,355,1);
光标：指针；
：悬停{
颜色：# fff
背景：# 40 a9 ff
边框-颜色：# 40 a9 ff
}
}
}
}
}
}
/风格
使用对话组件弹出对话框：
对话
title=Title
:content=content
:footer=true
cancelText=取消
okText=确认
@close=onClose
@cancel=onCancel
@ok=onConfirm
v-show=showDialog
/
从"@/组件/对话框"导入对话框
组件：{
对话
},
data () {
返回{
showDialog: false，
内容： ,
}
},
方法：{
onDialog (content) { //调用对话弹出对话框
这个。Content= modal的内容.
this.showDialog=true
},
onClose () { //关闭对话
this.showDialog=false
},
onCancel () { //"取消"按钮回调
this.showDialog=false
},
onConfirm () { //"确定"按钮回调
this.showDialog=false
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。