vue自定义指令笔记

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

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

比如：拖拽指令

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

 data () {
       return {
         positionX: ,
         positionY: ,
         parentWidth: ,
         parentHeight:
       }
     },
     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 =
               let top =
               if ((e.clientX - disX) < ) {
                 left =
               } else if ((e.clientX - disX) > (parentWidth - odiv.offsetWidth)) {
                 left = parentWidth - odiv.offsetWidth
               } else {
                 left = e.clientX - disX
               }

               if ((e.clientY - disY) < ) {
                 top =
               } 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()，否则拖拽后样式会异常