vue消息提示框,vue的app实现通知栏消息
这篇文章主要为大家详细介绍了某视频剪辑软件实现通知或详情类弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现通知或详情类弹窗的具体代码，供大家参考，具体内容如下
效果如图所示：(整体样式模仿蚂蚁设计模型样式，同时阴影覆盖浏览器窗口，并自定义滚动条样式)
创建弹窗组件对话框。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
u-content v-html=content/p
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称："对话框",
道具：{
标题：{
类型：字符串，
默认值： 提示
},
内容：{
类型：字符串，
默认值：""
}
},
方法：{
onClose () {
这个发出(关闭)
}
}
}
/脚本
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像素
border-radius:4px 4px 0 0；
border-bottom:1px solid # e8e 8；u形头{
边距：0;
颜色：rgba(0，0，0，85);
字体粗细：500;
字体大小：16px
行高：22px
自动换行：断字；
}
}。间位模态-车身{
身高：425像素
填充：24px
字体大小：16px
行高：1.5;
自动换行：断字；
框大小：边框-框；
溢出：自动；你-内容{
宽度：672像素
img {最大宽度：100%;} //v-html中图片过大时，设置其样式最大宽度为100%
}
}
/* 自定义滚动条样式*/。m-modal-body:-WebKit-滚动条{
宽度：10px/*对垂直流动条有效*/
高度：10px/*对水平流动条有效*/
}
/*定义滚动条的圆角、内阴影及轨道样式*/。m-modal-body:-WebKit-滚动条-跟踪
边框半径：5px
方框阴影：插入0 0 6px rgba(0，0，0，3);
背景：# fff
}
/* 滚动条上部轨道样式*/。m-modal-body:-WebKit-滚动条-跟踪-片段：垂直：开始{
边框半径：5px
背景：# c3c3c3
}
/*定义圆角、内阴影及滑块样式*/。m-modal-body:-WebKit-滚动条-缩略图{
边框半径：5px
方框阴影：插入0 0 6px rgba(0，0，0，3);
背景：# e8e8e8
：悬停{ //悬浮或选中时滑块样式
背景：# c9c9c9
}
}
}
}
}
/风格
使用对话组件进行通知，详情类的展示：
对话
title=提示
:content=content
@close=onClose
v-show=showDialog
/
从"@/组件/对话框"导入对话框
组件：{
对话
}
data () {
返回{
showDialog: false，
内容： ,
}
}
方法：{
onDialog (content) { //调用对话弹窗展示
内容=内容
this.showDialog=true
},
onClose () { //关闭对话
this.showDialog=false
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。