【vue】自定义指令

在 Vue.js 中，自定义指令（Custom Directives）是一种非常有用的功能，它允许你在 DOM 上绑定特定的行为。自定义指令可以让你封装和重用那些不需要整个组件就能完成的任务，比如操作 DOM 或响应用户事件。

一、vue2中自定义指令示例

// 定义自定义指令
Vue.directive('alert-on-click', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      alert('Element clicked with value: ' + binding.value);
    });
  }
});

// 在模板中使用
<div v-alert-on-click="'Hello, world!'">Click me!</div>

二、 Vue3自定义指令示意

import { createApp, directive } from 'vue';

const app = createApp(App);

app.directive('alert-on-click', {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      alert('Element clicked with value: ' + binding.value);
    });
  },
  updated(el, binding) {
    // 如果需要在值更新时做些事情，可以在这里处理
  },
  beforeUnmount(el) {
    el.removeEventListener('click', el.clickHandler);
  }
});

自定义指令可以有以下几种钩子：

1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2、inserted：被绑定的元素插入到 DOM 中时调用。
3、update：所在组件的 VNode 更新时调用，但可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的渲染（仅当 deep 选项为 true 时可用）。
4、componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 

三、多个指令集同时挂载示例

以点击标签复制字符串为例子： 

1、创建 src > util > directives > copy.js 文件

import { copyFunction } from '@/util/util'
const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      copyFunction(el.$value)
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  }
}

export default copy

2、创建 src > util > directives > index.js 文件，引入指令

import copy from './copy'
// 自定义指令
const directives = {
  copy,
}

export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  }
}

3、在main.js中引入index文件

import directives from '@/util/directives' // 自定义 v-{功能名}

4、在vue页面的标签张直接用写上v-copy即可实现复制功能

<button v-copy="myText">{{myText}}</button>

export default {
  data() {
    return {
      myText: 'Hello, world!'
    };
  }
};