Vue实现通知或详情类弹窗
作者:theMuseCatcher 时间:2024-05-29 22:45:06
本文实例为大家分享了Vue实现通知或详情类弹窗的具体代码,供大家参考,具体内容如下
效果如图所示:(整体样式模仿ant-design-vue Modal样式,同时阴影覆盖浏览器窗口,并自定义滚动条样式)
①创建弹窗组件Dialog.vue:
<template>
<div class="m-dialog-mask">
<div class="m-modal">
<div class="m-modal-content">
<div @click="onClose" class="u-close">✖</div>
<div class="m-modal-header">
<div class="u-head">{{ title }}</div>
</div>
<div class="m-modal-body">
<p class="u-content" v-html="content"></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Dialog',
props: {
title: {
type: String,
default: '提示'
},
content: {
type: String,
default: ''
}
},
methods: {
onClose () {
this.$emit('close')
}
}
}
</script>
<style lang="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: 0 auto;
.m-modal-content {
position: relative;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(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: 16px 24px;
border-radius: 4px 4px 0 0;
border-bottom: 1px solid #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: inset 0 0 6px rgba(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: inset 0 0 6px rgba(0,0,0,.3);
background: #e8e8e8;
&:hover { // 悬浮或选中时滑块样式
background: #c9c9c9;
}
}
}
}
}
</style>
②使用Dialog组件进行通知,详情类的展示:
<Dialog
title="提示"
:content="content"
@close="onClose"
v-show="showDialog"
/>
import Dialog from '@/components/Dialog'
components: {
Dialog
}
data () {
return {
showDialog: false,
content: '',
}
}
methods: {
onDialog (content) { // 调用Dialog弹窗展示
this.content = content
this.showDialog = true
},
onClose () { // 关闭dialog
this.showDialog = false
}
}
来源:https://blog.csdn.net/Dandrose/article/details/118969366
标签:vue,弹窗
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
使用开源Cesium+Vue实现倾斜摄影三维展示功能
2024-05-28 15:51:51
![](https://img.aspxhome.com/file/2023/8/123158_0s.jpg)
asp 快钱网关接口 支付宝接口 财付通接口代码
2011-03-08 10:55:00
linux ubuntu中安装、卸载和删除python-igraph的方法教程
2021-01-10 19:54:02
Golang操作sqlite3数据库的详细教程
2024-01-14 05:32:52
Linux如何添加mysql系统环境变量
2024-01-24 16:27:54
Python通过yagmail实现发送邮件代码解析
2022-12-31 13:44:58
![](https://img.aspxhome.com/file/2023/4/125134_0s.png)
Vue中的Object.defineProperty全面理解
2024-05-29 22:44:02
pymongo中聚合查询的使用方法
2021-07-07 19:31:23
![](https://img.aspxhome.com/file/2023/6/112186_0s.png)
CSS布局之浮动(二)三列浮动
2008-08-19 12:47:00
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2021-09-14 17:03:46
![](https://img.aspxhome.com/file/2023/6/64716_0s.png)
如何使用Python调整图像大小
2021-11-30 00:10:14
![](https://img.aspxhome.com/file/2023/3/124133_0s.png)
python 实现语音聊天机器人的示例代码
2021-03-24 14:36:07
![](https://img.aspxhome.com/file/2023/7/124637_0s.png)
python中的format是什么意思,format怎么用
2022-07-31 08:51:45
![](https://img.aspxhome.com/file/2023/4/75354_0s.jpg)
python 反编译exe文件为py文件的实例代码
2021-12-06 06:51:21
Vue 搭建Vuex环境详解
2024-04-10 13:48:59
Django完整增删改查系统实例代码
2022-11-13 03:07:27
![](https://img.aspxhome.com/file/2023/5/108015_0s.jpg)
mysql -参数thread_cache_size优化方法 小结
2024-01-13 14:33:33
![](https://img.aspxhome.com/file/2023/9/124829_0s.png)
一些文档中没有介绍的SQL Server DBCC命令
2008-12-09 14:24:00
python 利用jinja2模板生成html代码实例
2023-11-19 18:56:41
Python3 能振兴 Python的原因分析
2021-01-11 06:44:12