vue 自定义指令的使用与相关案例

Vue 自定义指令的使用

自定义指令

Vue.js 提供了自定义指令的机制，允许开发者定义自己的指令。

自定义指令的使用方法如下：

// 注册指令
Vue.directive('my-directive', {
  bind: function (el, binding) {
    // 指令绑定时执行的函数
  },
  update: function (el, binding) {
    // 指令所在元素的绑定值改变时执行的函数
  },
  unbind: function (el) {
    // 指令解绑时执行的函数
  }
})


// 使用指令
<div v-my-directive="someValue"></div>

指令钩子

自定义指令有三个钩子函数：

• bind：指令绑定时执行的函数，只调用一次。
• update：指令所在元素的绑定值改变时执行的函数，可能调用多次。
• unbind：指令解绑时执行的函数，只调用一次。

Vue自定义指令控制页面按钮的显示隐藏

需求

在后台管理系统中，有些页面的按钮需要根据用户的权限来控制显示或隐藏，比如只有管理员才能查看某些页面的按钮。

解决方案

Vue自定义指令可以帮助我们实现这个需求。

首先，我们需要定义一个自定义指令，指令名可以自定义，比如：v-permission。

import Vue from 'vue'
import store from '@/store'

Vue.directive('permission', {
  bind: function (el, binding) {
    // 获取用户权限列表
    const permission = store.getters.permission
    if (!permission.includes(binding.value)) {
      el.style.display = 'none'
    }
  }
})

全局注册

我们可以全局注册这个自定义指令，这样所有页面都可以使用这个指令。

import Vue from 'vue'
import store from '@/store'
import permission from '@/directive/permission'


Vue.use(permission)

局部注册

我们也可以局部注册这个自定义指令，只在当前页面使用。

import Vue from 'vue'
import permission from '@/directive/permission'

export default {
  directives: {
    permission
  },
  data() {
    return {
      // 省略其他数据
    }
  },
  // 省略其他代码
}

Vue3 setup 语法

在 Vue3 中，我们可以使用 setup 函数来定义组件，并在其中使用自定义指令。

<script setup>
  // 在模板中启用 v-focus

  const vFocus = {
    mounted: el => el.focus()
  }
</script>

<template>
  <input type="text" v-focus />
</template>

在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，vFocus 即可以在模板中以 v-focus 的形式使用。

将一个自定义指令全局注册到应用层级也是一种常见的做法：

import { createApp } from 'vue'
import App from './App.vue'
import permission from './directive/permission'

const app = createApp(App)
app.directive('permission', permission)
app.mount('#app')

权限列表

权限列表可以是用户拥有的权限列表，也可以是页面需要的权限列表。

权限值

权限值可以是任意字符串，比如：admin、user、edit、delete 等等。

使用

在页面中使用这个指令，只需要在元素上添加 v-permission 属性，并设置权限值即可。

<button v-permission="'admin'">管理员按钮</button>
<button v-permission="'user'">普通用户按钮</button>

注意事项

自定义指令的使用需要注意以下几点：

• 自定义指令的名称不能与 Vue.js 内置指令的名称相同。
• 自定义指令的钩子函数中不要使用 this 关键字，因为 this 指向的是 Vue 实例，而非自定义指令实例。
• 自定义指令的 update 函数只会在绑定值改变时才会调用，所以在 update 函数中不要做过多的操作，否则会造成性能问题。