Vue dialog模态框的封装方法

前言

这个是基于vue2的模态框封装,仿照elementUI而写的组件。

效果如图

首先我们需要一个遮罩层

<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>           <!-- 传入的标题 -->           <h5>{{ title }}</h5>           <!-- 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;       };     },   },

以上就是dialog的封装。

推荐阅读