vue自定义指令笔记

https://cn.vuejs.org/v2/guide/custom-directive.html

在vue中，有时候我们会把抽象的方法封装为一个自定义指令，多个地方共用

比如：拖拽指令

<div id="myChart1" class="myChart1" v-drag>
      {{positionX}}
      {{positionY}}
</div>

data () {
      return {
        positionX: 0,
        positionY: 0,
        parentWidth: 0,
        parentHeight: 0
      }
    },
    directives: {
      drag: {
        inserted: function (el, binding, vnode) {
          let _this = vnode.context // 指令里要想获取vue实例，可以使用vnode.context
          let parentWidth = _this.$refs.test.offsetWidth
          let parentHeight = _this.$refs.test.offsetHeight
          let odiv = el // 获取目标元素
          odiv.onmousedown = (e) => {
            console.log(e) // 这俩个e一样
            // 算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft
            let disY = e.clientY - odiv.offsetTop

            // 并移动的事件
            document.onmousemove = (e) => {
              console.log(e) // 这俩个e一样
              // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
              let left = 0
              let top = 0
              if ((e.clientX - disX) < 0) {
                left = 0
              } else if ((e.clientX - disX) > (parentWidth - odiv.offsetWidth)) {
                left = parentWidth - odiv.offsetWidth
              } else {
                left = e.clientX - disX
              }

              if ((e.clientY - disY) < 0) {
                top = 0
              } else if ((e.clientY - disY) > (parentHeight - odiv.offsetHeight)) {
                top = parentHeight - odiv.offsetHeight
              } else {
                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
            }
          }
        }
      }
    },

备注：

   1、使用this.$refs获取动态值的时候，要这样写   this.$refs['value']

   2、拖拽的div样式要特别注意：position要为absolute，不能用transform: translate()，否则拖拽后样式会异常