这篇“Vue dialog模态框如何封装”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue dialog模态框如何封装”文章吧。
首先我们需要一个遮罩层
计算
安全
数据库
网络和加速
企业服务
<template>
<div class="myDialog">
<div v-if="visable" class="dialog_mask" @click="close"></div>
</div>
</template>
<style>
.dialog_mask {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.418);
position: fixed;
top: 0;
left: 0;
z-index: 122;
}
</style>然后是主体部分
<!-- 模态框内容部分 -->
<div v-if="visable" class="dialog_window" @mousedown="moveDialog">
<header>
<!-- 传入的标题 -->
<h6>{{ title }}</h6>
<!-- x号关闭 -->
<span @click="close">x</span>
</header>
<!-- 插槽插入中间的内容 -->
<div class="ctx">
<slot></slot>
</div>
<!-- 插槽插入底部按钮 -->
<div class="footer">
<slot name="footer"></slot>
</div>
</div>props传入的值
props: {
visable: { // 数据显示隐藏
type: Boolean,
default: false,
},
title: { // 标题
type: String,
},
move: { // 是否可拖动
type: Boolean,
default: false,
}
},对应的事件
methods: {
close() { // 关闭功能
this.$emit("update:visable", false); // .sync修饰符 父子组件同步更新
this.callBack(this.visable);
},
moveDialog(e) { // 拖动
if (!this.move) return false;
let odiv = e.target;
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e) => {
let left = e.clientX - disX;
let top = e.clientY - disY;
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmousedown = null;
};
},
},以上就是关于“Vue dialog模态框如何封装”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
