1. Custom instruction - hook function

提示：钩子函数：

Custom instructions have five life cycles (also called hook functions), which are: bind,inserted,update,componentUpdated,unbind.

bind: Called only once, when the directive is bound to the element for the first time. Use this hook function to define an initialization setup that is performed once when binding. (The parent node is null when bind, because bind is called before the dom tree is drawn)
inserted: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document, it is called after the dom tree is drawn).
update: Called when the template vNode bound to the element is updated, but may occur before its child vNode is
updated. The value of the directive may or may not have changed. Unnecessary template updates can be ignored by comparing bound values before and after the update.
componentUpdated: Called after the VNode of the component where the bound element is located and its child VNodes are all updated.
unbind: Called only once, when the directive is unbound from the element.

提示：以下是本篇文章正文内容，下面案例可供参考

2. Hook function parameters?

Hook function parameter description, commonly used parameters passed in custom instructions:

el: The element bound to the directive can be used to directly manipulate the DOM.
binding: An object that contains a lot of information about the instruction. as follows:

name: The command name, excluding the v- prefix.

value: the binding value of the directive, for example: in v-my-directive="1 + 1", the binding value is 2.

oldValue: The previous value bound by the directive, only available in update and componentUpdated hooks. Available whether or not the value has changed.

expression: Instruction expression in string form. For example, in v-my-directive="1 + 1", the expression is "1 + 1".

arg: Arguments passed to the command, optional. For example, in v-my-directive:foo, the parameter is "foo".

modifiers: An object containing modifiers. For example: in v-my-directive.foo.bar, the modifier object is { foo: true, bar: true }.

vnode: The virtual node generated by Vue compilation.

oldVnode: the previous virtual node, only available in update and componentUpdated hooks.

Except for el, all other parameters should be read-only.

3. Global Custom Instructions

Realization principle

Set the label value on the el-button button, use the command function of vue to obtain the button instance object and the label value bound to the button, and match it with the button permission data obtained from the interface. If the match is successful, it proves that the user owns the button. Use permission. If you find that you do not have permission, write code in the command processing function to remove the button, and the button will no longer be visible on the interface.

Packaging components

Create a new directive directory under the src directory, and create a new permission.js file under the directory:

code show as below:

import Vue from 'vue';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const buttonPermissions = Vue.directive('permission',{
    
    
    /**
     * inserted：被绑定元素插入父节点时调用 
     * el：指令所绑定的元素，可以用来直接操作 DOM
     * binding.value：指令的绑定值，例如：v-directive="10" 中，绑定值为 10。
     */
    inserted(el,binding){
    
    
        let buttonKey = binding.value;
        // 代表某个元素需要通过权限验证
        if(buttonKey){
    
    
            let key = checkKey(buttonKey)
            if(!key){
    
    //没有权限
                el.remove()  //删除按钮
            }
        }else{
    
    
            throw new Error('缺少唯一指令')
        }
    },
}) 
 
// 检测传入的元素key是否可以显示
function checkKey(key) {
    
    
    // 获取权限数组
    let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;
    //如果传入的元素key不在权限数组里，则不可显示
    let index = permissionData.indexOf(key)
    if(index > -1) {
    
    
        return true;
    }else{
    
    
        return false;
    }
}

Import components

Introduce custom instructions in the entry file src\main.js:

import permissionfrom './directive/permission'
Vue.use(permission)

use components

On the used page, you only need to quote the v-operate command in the button, and assign the value:

<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>

Vue custom instructions to achieve button-level permission control

Article Directory