您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇“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模态框如何封装”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。