vue 自定义指令，vue中使用拖拽事件

记录一下自己学习vue中书写项目中遇到的问题。
由于项目需求需要写拖拽事件（需求，是一个按钮，可以在页面上自由拖拽点击），自己定义后，最开始想到的是利用ref获取div标签，在对其进行dom操作,发现不行。在查看官方文档发现了自定义指令（自己学习的时候漏掉的知识点），但是一直有个问题，就是拖拽后点击事件也触发了。
这是因为两个原因:

• 拖拽事件放在了点击事件外

//最初的代码
<div v-drag>
	<el-button @click="clickButton">点击</el-button>
</div>
//js
directives: {
    drag: {
      // 指令的定义
      inserted: function(el, binding) {
        // el.drag();
        // 获取元素
        let x = 0
        let y = 0
        let l = 0
        let t = 0
        let isDown = false
        // 鼠标按下事件
        el.onmousedown = function(e) {
          // 获取x坐标和y坐标
          x = e.clientX
          y = e.clientY
          // 获取左部和顶部的偏移量
          l = el.offsetLeft
          t = el.offsetTop
          // 开关打开
          isDown = true
          // 设置样式
          el.style.cursor = 'move'
          // 鼠标移动
          el.onmousemove = function(e) {
            if (isDown == false) {
              return
            }
            // 获取x和y
            const nx = e.clientX
            const ny = e.clientY
            // 计算移动后的左偏移量和顶部的偏移量
            const nl = nx - (x - l)
            const nt = ny - (y - t)
            this.dragX = nl
            el.style.left = nl + 'px'
            el.style.top = nt + 'px'
            // 获取鼠标移动
            this.dragOnmousemove = false
          }
        }
        // 鼠标抬起事件
        el.onmouseup = function() {
          // 开关关闭
          isDown = false
          // moveClick = false
          el.style.cursor = 'default'
          return
        }
      }
    }
  },

这样就是每次移动后就执行了button按钮中的点击事件，随后更改，把点击事件放入div中，直接用自定义指令操作,定义一个变量来记录

el.onclick = function() {
          console.log(moveClick)
          if (moveClick) {
            moveClick = false
            return
          }
        }

这样也有问题，就是获取不到我需要的参数，在之定义指令获取不到data（）{}中的值并且去改变他
这个时候我们需要借助函数拿去数据.

• 完整获取代码

<div
      ref="div"
      v-drag="{ set: set }"
      :style="{
        width: dragWidth + 'px',
        height: dragHeight + 'px',
        right: dragRight + 'px',
        top: dragTop + 'px',
        position: 'absolute'
      }"
    >
      <el-button
        size="medium"
        type="success"
        class="button_quality"
        circle
      >质检</el-button>
    </div>

// 中间函数执行
set(dragVisible) {
//dragVisible   是从自定义函数中出过来的值
      this.dragVisible = dragVisible
    },
// 自定义函数
 // 自定义指令指向鼠标拖动按钮
  directives: {
    drag: {
      // 指令的定义   el 是指的dom元素  binding是一个对象
      inserted: function(el, binding) {
      
        // el.drag();
        // 获取元素
        let x = 0
        let y = 0
        let l = 0
        let t = 0
        let isDown = false
        let moveClick = false
        // 鼠标按下事件
        el.onmousedown = function(e) {
          // 获取x坐标和y坐标
          x = e.clientX
          y = e.clientY
          // 获取左部和顶部的偏移量
          l = el.offsetLeft
          t = el.offsetTop
          // 开关打开
          isDown = true
          // 设置样式
          el.style.cursor = 'move'
          // 鼠标移动
          el.onmousemove = function(e) {
            // 记录鼠标事件
            moveClick = true
            if (isDown == false) {
              return
            }
            // 获取x和y
            const nx = e.clientX
            const ny = e.clientY
            // 计算移动后的左偏移量和顶部的偏移量
            const nl = nx - (x - l)
            const nt = ny - (y - t)
            this.dragX = nl
            el.style.left = nl + 'px'
            el.style.top = nt + 'px'
            // 获取鼠标移动
            this.dragOnmousemove = false
          }
        }
        // 鼠标抬起事件
        el.onmouseup = function() {
          // 开关关闭
          isDown = false
          // moveClick = false
          el.onmousemove = null
          el.style.cursor = 'default'
          return
        }

        el.onclick = function() {
          console.log(moveClick)
          if (moveClick) {
            moveClick = false
            return
          }
          console.log('++++++++++++++')
          // 调用set函数传值
          binding.value.set(true)
        }
      }
    }
  },

vue只能给定义指令官网：https://cn.vuejs.org/v2/guide/custom-directive.html
博主个人小博客：嘿嘿
本篇文章：点击