vue中简单弹框dialog的实现方法
作者:jingxian 时间:2024-05-21 10:14:57
效果如下,dialog中内容自行添加
<template>
<div>
<div class="dialog-wrap">
<div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
<transition name="drop">
<div class="dialog-content" v-if="isShow">
<p class="dialog-close" @click="closeMyself">x</p>
<slot>empty</slot>
</div>
</transition>
</div>
</div>
</template>
接收父组件传参isShow,并返回一个自定义事件on-close
<script>
export default {
props: {
isShow: {
type: Boolean,
default: false
}
},
data () {
return {
}
},
methods: {
closeMyself () {
this.$emit('on-close')
}
}
}
</script>
<style scoped>
.drop-enter-active {
transition: all .5s ease;
}
.drop-leave-active {
transition: all .3s ease;
}
.drop-enter {
transform: translateY(-500px);
}
.drop-leave-active {
transform: translateY(-500px);
}
.dialog-wrap {
position: fixed;
width: 100%;
height: 100%;
}
.dialog-cover {
background: #000;
opacity: .3;
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.dialog-content {
width: 50%;
position: fixed;
max-height: 50%;
overflow: auto;
background: #fff;
top: 20%;
left: 50%;
margin-left: -25%;
z-index: 10;
border: 2px solid #464068;
padding: 2%;
line-height: 1.6;
}
.dialog-close {
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
text-align: center;
cursor: pointer;
}
.dialog-close:hover {
color: #4fc08d;
}
</style>
来源:http://blog.csdn.net/xidongdong1/article/details/78666709
标签:vue,dialog,弹框
0
投稿
猜你喜欢
python matplotlib如何给图中的点加标签
2023-02-23 12:16:47
JavaScript实现获取最近7天的日期的方法详解
2024-04-27 15:20:59
CentOS7安装MySQL8的超级详细教程(无坑!)
2024-01-25 13:25:41
Python字符串hashlib加密模块使用案例
2023-08-02 12:06:24
Linux oracle数据库自动备份自动压缩脚本代码
2024-01-19 01:44:40
python3实现指定目录下文件sha256及文件大小统计
2023-11-26 15:37:00
Python爬取商家联系电话以及各种数据的方法
2023-07-24 18:39:38
python中将\\\\uxxxx转换为Unicode字符串的方法
2023-11-04 15:20:07
用js解决数字不能换行问题
2024-04-23 09:25:38
IE中雅黑字体给布局带来的变化
2008-06-13 11:22:00
如何通过神经网络实现线性回归的拟合
2023-04-24 06:15:07
不唐突的JavaScript的七条准则[翻译]
2008-12-09 13:33:00
Mysql Explain命令的使用与分析
2024-01-29 08:39:04
Python 3.6 中使用pdfminer解析pdf文件的实现
2023-09-02 08:34:08
Python基于dom操作xml数据的方法示例
2023-02-15 10:18:30
MSSQL 事务说明
2024-01-25 12:18:23
Vue数据增删改查与表单验证的实现流程介绍
2024-05-28 15:42:51
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2022-04-22 22:35:17
构建可视化 web的 Python 神器streamlit
2021-05-03 16:56:05
python 字符串转列表 list 出现\\ufeff的解决方法
2023-11-24 18:47:06