解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突

  directives: {
   drag: {
    // 指令的定义
    bind: function (el) {
     let odiv = el; //获取当前元素
     let firstTime='',lastTime='';
     odiv.onmousedown = (e) => {
      document.getElementById('dragbtn').setAttribute('data-flag',false)
      firstTime = new Date().getTime();
      // 算出鼠标相对元素的位置
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
       // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
       let top = e.clientY - disY;
       // 页面范围内移动元素
       if (top > 0 && top < document.body.clientHeight - 48) {
        odiv.style.top = top + 'px';
       }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        // onmouseup 时的时间，并计算差值
        lastTime = new Date().getTime();
        if( (lastTime - firstTime) < 200){
         document.getElementById('dragbtn').setAttribute('data-flag',true)
        }
      };
     };
    }
   }
  },

click(e) {
 // 验证是否为点击事件，是则继续执行click事件，否则不执行
    let isClick = document.getElementById('dragbtn').getAttribute('data-flag');
    if(isClick !== 'true') {
     return false
    }
    if (!localStorage.settings) {
     return this.$message.error('请选择必填项并保存');
    }
    if (this.right === -300) {
     this.right = 0;
     this.isMask = true;
    } else {
     this.right = -300;
     this.isMask = false;
    }
   },