vue自定义指令

vue可以中通过Vue.directive注册一个全局的自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

• 实现一个拖拽的自定义指令

import Vue from 'vue';

Vue.directive('drag', {
  bind(el) {
    el.style.cssText += ';cursor: move;z-index: 1000';

    el.onmousedown = function (e) {
      // 鼠标按下，计算当前元素距离可视区的距离
      const x = e.clientX - el.offsetLeft;
      const y = e.clientY - el.offsetTop;

      document.onmousemove = function (e) {
        let left = e.clientX - x;
        let top = e.clientY - y;
        el.style.cssText += `;left:${left}px;top:${top}px;`;
      }

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  }
})