Vue dialog模态框的封装

前言

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

效果如图

首先我们需要一个遮罩层

然后是主体部分

      
      
        

          
          {{ title }}
          
          x
        
        
        
          
        
        
        
          
        
      

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的封装。