Vue如何实现通知或详情类弹窗
Vue如何实现通知或详情类弹窗
这篇文章主要介绍了Vue如何实现通知或详情类弹窗，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
效果如图所示：（整体样式模仿ant-design-vue Modal样式，同时阴影覆盖浏览器窗口，并自定义滚动条样式）
①创建弹窗组件Dialog.vue：
<template><divclass="m-dialog-mask"><divclass="m-modal"><divclass="m-modal-content"><div@click="onClose"class="u-close">✖</div><divclass="m-modal-header"><divclass="u-head">{{title}}</div></div><divclass="m-modal-body"><pclass="u-content"v-html="content"></p></div></div></div></div></template><script>exportdefault{name:'Dialog',props:{title:{type:String,default:'提示'},content:{type:String,default:''}},methods:{onClose(){this.$emit('close')}}}</script><stylelang="less>.m-dialog-mask{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1000000;background:rgba(0,0,0,0.45);.m-modal{width:720px;position:relative;top:calc(50%-240px);margin:0auto;.m-modal-content{position:relative;background:#fff;border-radius:4px;box-shadow:04px12pxrgba(0,0,0,.1);.u-close{position:absolute;top:16px;right:24px;color:rgba(0,0,0,.45);font-size:18px;line-height:22px;cursor:pointer;transition:color.3s;&:hover{color:rgba(0,0,0,.75);}}.m-modal-header{height:22px;padding:16px24px;border-radius:4px4px00;border-bottom:1pxsolid#e8e8e8;.u-head{margin:0;color:rgba(0,0,0,.85);font-weight:500;font-size:16px;line-height:22px;word-wrap:break-word;}}.m-modal-body{height:425px;padding:24px;font-size:16px;line-height:1.5;word-wrap:break-word;box-sizing:border-box;overflow:auto;.u-content{width:672px;img{max-width:100%;}//v-html中图片过大时，设置其样式最大宽度为100%}}/*自定义滚动条样式*/.m-modal-body::-webkit-scrollbar{width:10px;/*对垂直流动条有效*/height:10px;/*对水平流动条有效*/}/*定义滚动条的圆角、内阴影及轨道样式*/.m-modal-body::-webkit-scrollbar-track{border-radius:5px;box-shadow:inset006pxrgba(0,0,0,.3);background:#fff;}/*滚动条上部轨道样式*/.m-modal-body::-webkit-scrollbar-track-piece:vertical:start{border-radius:5px;background:#c3c3c3;}/*定义圆角、内阴影及滑块样式*/.m-modal-body::-webkit-scrollbar-thumb{border-radius:5px;box-shadow:inset006pxrgba(0,0,0,.3);background:#e8e8e8;&:hover{//悬浮或选中时滑块样式background:#c9c9c9;}}}}}</style>
②使用Dialog组件进行通知，详情类的展示：
<Dialogtitle="提示":content="content"@close="onClose"v-show="showDialog"/>importDialogfrom'@/components/Dialog'components:{Dialog}data(){return{showDialog:false,content:'',}}methods:{onDialog(content){//调用Dialog弹窗展示this.content=contentthis.showDialog=true},onClose(){//关闭dialogthis.showDialog=false}}
感谢你能够认真阅读完这篇文章，希望小编分享的“Vue如何实现通知或详情类弹窗”这篇文章对大家有帮助，同时也希望大家多多支持恰卡编程网，关注恰卡编程网行业资讯频道，更多相关知识等着你来学习!
