vue中自定义全局指令

在 Vue 中，我们可以通过自定义全局指令来扩展 Vue 的功能。全局指令可以在整个应用程序中使用，无需在每个组件中单独引入或注册。

要自定义全局指令，可以在 Vue 实例创建之前使用 `Vue.directive` 方法进行注册。下面是一个简单的示例：

// main.js

import Vue from 'vue'

// 定义全局指令
Vue.directive('highlight', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = binding.value
  }
})

new Vue({
  // ...
}).$mount('#app')

在上面的示例中，我们定义了一个名为 `highlight` 的全局指令。在 `bind` 钩子函数中，我们可以通过 `el` 参数获取到绑定指令的元素，通过 `binding` 参数获取到指令的值。在这个例子中，我们将绑定指令的元素的背景色设置为指令的值（可以通过 `v-highlight="'color'"` 来传递值）。

现在，我们可以在任何组件的模板中使用这个全局指令：

<template>
  <div>
    <h1 v-highlight="'yellow'">Hello World</h1>
    <p v-highlight="'lightblue'">This is a custom directive example.</p>
  </div>
</template>

在上面的示例中，我们使用了 `v-highlight` 这个自定义指令，并将不同的背景色作为参数传递给指令。

通过自定义全局指令，我们可以方便地扩展 Vue 的功能，并在整个应用程序中重复使用这些指令。