Vue dialog模态框的封装方法_vue.js_

       
         
                     
{{ title }}
                     x         
                 
                    
                 
                    

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;       };     },   },