VUE—directive自定义指令——拖拽案例

语法如下：
Vue.directive( id, [definition] )
{string} id
{Function | Object} [definition]

指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

在main.js中书写

Vue.directive("harry", {
  bind: function(el,binding) {
    //被绑定
    console.log("1 - bind");
  },
  inserted: function() {
    //绑定到节点
    console.log("2 - inserted");
  },
  update: function(el,binding) {
    //组件更新
    console.log("3 - update");
    console.log(el);
    el.style='color:'+binding.value;
  },
  componentUpdated: function() {
    //组件更新完成
    console.log("4 - componentUpdated");
  },
  unbind: function() {
    //解绑
    console.log("1 - bind");
  }
});

你的组件页面

    <div class="qiqi" v-harry="color">{{value}}</div>

组件页面的data

 return {
      value: 1,
      msg: "",
      color: "red"
    };

拖拽如下

在main.js中挂载 如下

//拖动
Vue.directive("drag", {
  //组建内自定义指令
  // 指令的定义
  inserted: function(el, value) {
    let oDiv = el; //当前元素
    let self = this; //上下文
    let i = 0;
    oDiv.ontouchstart = function(e) {
      let touch;

      e.preventDefault();

      if (e.touches) {
        touch = e.touches[0];
      } else {
        touch = e;
      }
      //鼠标按下，计算当前元素距离可视区的距离
      let disX = touch.clientX - oDiv.offsetLeft;
      let disY = touch.clientY - oDiv.offsetTop;
      let maxW = document.body.clientWidth - oDiv.offsetWidth;
      let maxH = document.body.clientHeight - oDiv.offsetHeight;
      oDiv.style.zIndex = 1002;
      document.ontouchmove = function(e) {
        //通过事件委托，计算移动的距离
        if (e.touches) {
          touch = e.touches[0];
        } else {
          touch = e;
        }
        let l = touch.clientX - disX;
        let t = touch.clientY - disY;
        //移动当前元素
        if (l < 0) {
          l = 0;
        } else if (l > maxW) {
          l = maxW;
        }
        if (t < 0) {
          t = 0;
        } else if (t >= maxH) {
          t = maxH;
        }
        oDiv.style.left = l + "px";
        oDiv.style.top = t + "px";
      };
      document.ontouchend = function(e) {
        document.ontouchmove = null;
        document.ontouchend = null;
        e.preventDefault(); 
      };
    };
  }
});

页面使用

        <div
            v-drag
        >
        </div>

上面这种肯定是会导致你的main.js过于杂乱，然后就把这种封装吧

Vue.directive的封装

在你的项目路径下创建一个directive文件夹

//拖拽
const drag = {
  inserted: function (el, value) {
    let oDiv = el; //当前元素
    let self = this; //上下文
    let i = 0;
    oDiv.ontouchstart = function (e) {
      let touch;

      e.preventDefault();

      if (e.touches) {
        touch = e.touches[0];
      } else {
        touch = e;
      }
      //鼠标按下，计算当前元素距离可视区的距离
      let disX = touch.clientX - oDiv.offsetLeft;
      let disY = touch.clientY - oDiv.offsetTop;
      let maxW = document.body.clientWidth - oDiv.offsetWidth;
      let maxH = document.body.clientHeight - oDiv.offsetHeight;
      oDiv.style.zIndex = 1002;
      document.ontouchmove = function (e) {
        //通过事件委托，计算移动的距离
        if (e.touches) {
          touch = e.touches[0];
        } else {
          touch = e;
        }
        let l = touch.clientX - disX;
        let t = touch.clientY - disY;
        //移动当前元素
        if (l < 0) {
          l = 0;
        } else if (l > maxW) {
          l = maxW;
        }
        if (t < 0) {
          t = 0;
        } else if (t >= maxH) {
          t = maxH;
        }
        oDiv.style.left = l + "px";
        oDiv.style.top = t + "px";
      };
      document.ontouchend = function (e) {
        document.ontouchmove = null;
        document.ontouchend = null;
        e.preventDefault();
      };
    };
  }
}
export {
  drag
}

在你的main.js中书写

import * as directive from "./directive/index"
Object.keys (directive).forEach(keys=>{
  console.log(keys)
  Vue.directive(keys,directive[keys])
})

在页面调用

        <div v-drag style="position:absolute">
          拖拽
        </div>

后期会专门总结一些常用的自定义指令方便大家开发欢迎补充和留言