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

<div id="app">
    <div v-test="'lxc'.substr(1,2)" 
         v-background="'green'">
    </div>
    <div v-event.stop="'green'"></div>
</div>

• 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 属性，如下：

<input v-focus>

• 拖拽案例：

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

<template>
  <div id="app">
    <div v-drag.t="flag" id="box"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  directives: {
    drag(el, { modifiers, value }) {
      if (value) {
        var disX, disY;
        var { l, t } = modifiers;
        el.style.position = "absolute";
        el.addEventListener("mousedown", mousedown);

        function mousedown(e) {
          disX = e.offsetX;
          disY = e.offsetY;

          document.addEventListener("mousemove", move);
          document.addEventListener("mouseup", up);
        }
        function move(e) {
          var x = e.clientX - disX;
          var y = e.clientY - disY;

          if ((l && t) || (!l && !t) ) {
            el.style.left = x + "px";
            el.style.top = y + "px";
            return;
          }
          if(l){
            el.style.left = x + 'px'
            return;
          }
          if(t){
            el.style.top = x + 'px'
            return;
          }
        }
        function up() {
          document.removeEventListener("mousemove", move);
          document.removeEventListener("mouseup", up);
        }
      }
    }
  },
  data() {
    return {
      flag: true,
      msg: "lxc"
    };
  },
  methods: {
    handleToggle() {
      this.flag = !this.flag;
    }
  }
};
</script>

<style>
#box {
  width: 100px;
  height: 100px;
  background: #c33;
}
</style>

二、钩子函数

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

• 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");
      }
  })