Vue自定义指令使用方法详解

什么是自定义指令

Vue.js 自带一些指令，比如 v-if、v-for 等，用于操作元素的属性、文本内容等。而自定义指令，就是允许我们自定义一些指令，实现一些 Vue.js 自带指令不具备的操作。

Vue.js 的自定义指令是通过 directive 方法来实现的，语法如下:

// 全局定义
Vue.directive('指令名', {
  bind: function(el, binding, vnode){
    // 在绑定指令时调用一次
  },
  inserted: function(el, binding, vnode){
    // 被绑定元素插入到父节点时调用（只会被调用一次）
  },
  update: function(el, binding, vnode, oldVnode){
    // 被绑定组件的 VNode 更新时调用
  },
  componentUpdated: function(el, binding, vnode, oldVnode){
    // 被绑定组件的 VNode 及其子 vNode 全部更新时调用
  },
  unbind: function(el, binding, vnode){
    // 在解绑指令时调用一次
  }
});

如何使用自定义指令

定义完成后，我们可以在我们的组件内使用删除线指令：

<template>
  <div v-del-text="'这行文字会被删除线穿过'"></div>
</template>

示例一

我们定义一个叫做 v-focus 的指令，使得在页面加载完毕的时候文本框自动获取鼠标焦点。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
})

使用自定义指令:

<template>
  <input v-focus />
</template>

示例二

我们定义一个叫做 v-clipboard 的指令，使得在点击某个元素的时候，其内容可以被复制到剪贴板中。

Vue.directive('clipboard', {
  bind: function (el, binding) {
    el.addEventListener('click', function () {
      var textarea = document.createElement('textarea');
      textarea.value = binding.value;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    });
  }
})

使用自定义指令:

<template>
  <button v-clipboard="'这行文字会被复制'">复制</button>
</template>

结语

Vue.js 的自定义指令是非常强大和灵活的，可以让我们扩展 Vue.js 的功能，增强程序的交互体验。