深入理解 Vue.directive() 方法

最新推荐文章于 2024-09-30 14:28:41 发布

盛夏520

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量535

点赞数 10

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56585325/article/details/142426937

版权

一、什么是 Vue.directive()

在 Vue.js 中，Vue.directive() 方法是一个用于注册自定义指令的重要API。指令是 Vue 的一种特殊语法，用于操作 DOM 元素，实现特定的行为。在这篇博客中，我们将探讨 Vue.directive() 方法的用法、特性、实例，以及常见的应用场景。

一、什么是 Vue.directive()

Vue.directive() 方法用于全局注册一个自定义指令。指令以特定的方式解析，并且与模板中的元素绑定，以便在元素的生命周期内执行自定义逻辑。

基本语法

Vue.directive(name, definition);

name: 指令名称，必须以 v- 前缀开头。
definition: 指令的定义，可以是一个对象或一个函数，定义指令的行为。

二、指令定义的结构

指令的定义可以提供多个生命周期钩子，以下是常用的钩子：

bind: 指令首次绑定到元素时调用，仅调用一次。
inserted: 被绑定元素插入父节点时调用。
update: 被绑定元素所在模板更新时调用。
componentUpdated: 被绑定元素所在模板的所有子组件更新时调用。
unbind: 指令与元素解绑时调用。

1.基本的自定义指令

以下是一个简单的自定义指令实例，可以实现将文本转换为大写字母的功能：

// 注册自定义指令 v-uppercase
Vue.directive('uppercase', {
    bind(el) {
        el.style.textTransform = 'uppercase';
    }
});

// 在 Vue 实例中使用指令
new Vue({
    el: '#app',
    template: `<div v-uppercase>Hello Vue!</div>`
});

在这个示例中，我们创建了一个名为 v-uppercase 的指令，当该指令应用于 DOM 元素时，文本将自动转换为大写。

2.带参数和修饰符的指令

你也可以为指令添加参数和修饰符，以接收额外的信息。

// 注册自定义指令 v-color
Vue.directive('color', {
    bind(el, binding) {
        el.style.color = binding.value; // 从指令值中获取颜色
    }
});

// 在 Vue 实例中使用指令
new Vue({
    el: '#app',
    template: `<div v-color="'blue'">This is blue text.</div>`
});

在这个例子中，我们创建了一个名为 v-color 的指令，可以通过传递参数来改变文本颜色。

3.指令修饰符

指令修饰符是一种提供额外功能的方式，在指令名后添加点(.)即可。例如：

// 注册自定义指令 v-focus
Vue.directive('focus', {
    inserted(el) {
        el.focus(); // 元素插入后获取焦点
    }
});

// 在 Vue 实例中使用指令
new Vue({
    el: '#app',
    template: `<input v-focus placeholder="I will be focused!" />`
});

三、项目实战

在实际的项目中，通常而言都会有权限控制，而权限的细分之下，有着按钮级别的控制。当然实现这个功能有很多种方法，这里我们就讲其中一种，也是我认为比较方便，简洁的一种，指令的方式。

一般在登录成功时会返回一个权限列表，如：

是一个数组类型，一般我们将其存在vuex中

1.新建文件如下

2.hasPermi.js

/**
 * v-hasPermi 操作权限处理
 */
import store from '@/store'

export default {
    inserted(el, binding, vnode) {
        const { value } = binding // 需要具备的目标权限
        const all_permission = "*:*:*"; // 超级管理员具备所有权限
        // vuex中存储的权限列表
        const permissions = store.getters && store.getters.permissions

        if (value && value instanceof Array && value.length > 0) {
            const permissionFlag = value

            const hasPermissions = permissions.some(permission => {
                return all_permission === permission || permissionFlag.includes(permission)
            })

            // 不具备目标权限，则删除该按钮节点
            if (!hasPermissions) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error(`请设置操作权限标签值`)
        }
    }
}

3.index.js

import hasPermi from './permission/hasPermi'

const install = function (Vue) {
    Vue.directive('hasPermi', hasPermi)
}

export default install

4. main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 全局指令
import directive from './directive'
// 挂载指令
Vue.use(directive)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

5.vue页面使用指令

        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            v-hasPermi="['system:post:add']"
           >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            v-hasPermi="['system:post:edit']"
           >修改</el-button>
         </el-col>

如此便可实现按钮级别的控制效果，具备有权限，按钮就会显示，没有就不显示。