基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突

本人在开发中遇到实现一个基于vue的悬浮框拖动效果，经过努力研究最终实现了功能，一下是我的方法和部分代码，希望对您有所帮助，如有不对的地方还请指出。谢谢！下面步入正题：
首先展示一下功能的效果图：

要求就是使用鼠标可以拖动在页面的可视区域进行来回移动。
下面是我写的vue页面中对应的元素的部分代码：在类名为“alarmMain”的元素上添加了一个@mousedown="move"的拖动事件

<template>
     <!-- 告警悬浮框 -->
        <div class="alarmBox">
          <div class="alarmMain"
               ref="alarmMain"
               :class="alarmNumber > 0 ? 'alarmMain2':'alarmMain1'"
               @mousedown="move"
               @click="open">
            {{alarmNumber}}条告警未处理
          </div>
        </div>
</template>

下面是javascript中的代码：

 methods: {   
    // 拖动事件
    move (e) {
      console.log(e, 'eeee')
      let odiv = e.target // 获取目标元素
      this.$refs.alarmMain.setAttribute('data-flag', false) // 动态为元素添加属性用于判断是否为拖动状态
      const firstTime = new Date().getTime()
      // 算出鼠标相对元素的位置
      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

        // 绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        // 移动当前元素
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
        // onmouseup 时的时间，并计算差值
        const lastTime = new Date().getTime()
        if ((lastTime - firstTime) < 200) {
          this.$refs.alarmMain.setAttribute('data-flag', true)
        }
      }
    },
    // 告警事件弹框的现实与隐藏
    open () {
      //  验证是否为点击事件，是则继续执行click事件，否则不执行
      let isClick = this.$refs.alarmMain.getAttribute('data-flag')
      if (isClick !== 'true') {
        return false
      } else {
        this.$refs.alarmTable.open()
      }
    }
  }

以上是实现基于vue的悬浮框拖动效果的代码，当然在上面JavaScript代码中已经包含了解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突的代码，在页面部分，我是在同一个元素中同时添加了一个move事件和点击click事件，当然如果不作出里会出现两种方法同时执行，所以我采用了一种根据两者执行顺序的先后和时间的长短来进行了判断这样的一个处理方法。