Vue自定义指令directive

Vue自定义指令directive

指令的作用：操作DOM 。（参考官方文档）

一、分类

• Vue.directive:全局自定义指令

Vue.directive("test",(el,...rest)=>{
    console.log(rest)
})

directive.png

参数1：指令名称

参数2：指令的配置项(函数、对象)

eg：（函数）

​ 参数1：使用当前指令的元素

​ 参数2：指令的详情信息

​ { modifers:修饰符,value:指令的结果(它所对应的值) }

• 添加背景颜色、阻止冒泡App.vue

• Utils.js

需要将Utils.js在入口文件main.js中引入

Vue.directive("test", (el, { value }) => {
    el.innerText = value;
})

Vue.directive("background", (el, { value }) => {
    el.style.backgroundColor = value;
})

Vue.directive("event", (el, { value, modifiers }) => {
    let { stop } = modifiers;

    el.addEventListener("click", (e) => {
        if (stop) {
            e.stopPropagation();
        }
        value();
    })
})

• directives:局部自定义指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

可以在模板中任何元素上使用新的 v-focus 属性，如下：

• 拖拽案例：

允许设置两种修饰符modifiers：l——横向拖拽；t——纵向拖拽；l.t（默认）任意拖拽

二、钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind

  只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted

  当使用指令的元素被插入到父节点（#app）的时候被触发 (仅保证父节点存在，但不一定已被插入文档中)。处理获取光标的焦点。

• update

  只要当前元素不被移除，其他操作（虚拟DOM只要涉及元素的显示、隐藏，值和内容的改变等）几乎都会触发触发虚拟DOM更新，进而先触发updata,后触发componentUpdated这两个生命周期。

  （display会触发，而visility则不会，因为前者涉及到了页面的回流）

• unbind

  只调用一次，指令与元素解绑时调用。

  例：在元素解绑时，执行了下面的unbind。再次绑定时，又执行了bing和inserted.

  unbind.png

  import Vue from "vue"
  Vue.directive("lxc", {
      bind() {
          console.log("bind");
      },
      inserted() {
          console.log("inserted");
      },
      update() {
          console.log("update");
      },
      componentUpdated() {
          console.log("componentUpdated");
      },
      unbind() {
          console.log("unbind");
      }
  })