辉太郎看前端(自定义指令)

前言

• vue中有系统提供的指令，也可以自定义指令，当我们需要操作低层元素时，可以自定义指令。
• 自定义指令在定义时，不用加v-，使用时要加v-。
• 自定义指令分两种，全局自定义指令和局部自定义指令。

自定义指令

• 全局自定义指令

全局自定义指令我们可以定义在main.js中，其使用的语法为Vue.directive(‘指令名’， function(){需要的指令钩子函数})

Vue.directive('drag',{
  //1.指令绑定到元素上回立刻执行bind函数，只执行一次
  //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
  //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
  bind:function(el){},
  //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
  inserted:function(el){
    el.onmousedown = function (e) {
    //设置定位使元素脱离文档流
      el.style.position = 'absolute';
      var disx = e.pageX - el.offsetLeft;
      var disy = e.pageY - el.offsetTop;
      document.onmousemove = function (e) {
        el.style.left = e.pageX - disx + 'px';
        el.style.top = e.pageY - disy + 'px';
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      }
    }
  },
  //当VNode更新的时候会执行updated，可以触发多次
  update:function(el) {}
})

• 局部自定义指令

• 定义在组件中的export default{}中
• 语法：directives:{指令名：{需要的指令钩子函数}}

 directives: {
    drag:{
      inserted: (el) => {
        //设置定位使元素脱离文档流
        el.style.position = "absolute";
        el.onmousedown = function (e) {
          var disx = e.pageX - el.offsetLeft;
          var disy = e.pageY - el.offsetTop;
          document.onmousemove = function (e) {
            el.style.left = e.pageX - disx + "px";
            el.style.top = e.pageY - disy + "px";
          };
          document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
          };
        };
      }
    },
  },

自定义指令的钩子函数

 bind(){} 只调用一次，指令第一次绑定到元素时调用
 inserted(){} 被绑定元素插入父节点时调用
 update(){} 被绑定元素所在的模板更新时调用，而不论绑定值是否变化 
 componentUpdated(){} 被绑定元素所在模板完成一次更新周期时调用          
 unbind(){} 只调用一次， 指令与元素解绑时调用

总结

初出茅庐，请多多指教。👊