vue自定义指令

自定义全局指令

在 Vue 实例创建之前，通过 Vue.directive(name, definition) 的方式来注册全局指令。其中 name 是指令的名称，definition 是一个对象，里面包含了指令的具体实现。

例如，下面是一个自定义全局指令的例子，实现了点击元素时显示元素内容的简单功能：

Vue.directive('click-me', {  
  bind: function (el, binding, vnode) {  
    el.addEventListener('click', function () {  
      alert(binding.value,vnode);  
    });  
  }  
});
1
2
3
4
5
6
7

使用

<template>  
  <div v-click-me="message">点击我</div>  
</template>
1
2
3

也可以把自定义指令单独封装到一个文件里，然后在main.js中引入
1、在src下新建一个文件夹directive，新建文件v.directive.js(文件名自己起，一般是指令名.directive.js)

import Vue from "vue"

Vue.directive('click-me', {  
  bind: function (el, binding, vnode) {  
    el.addEventListener('click', function () {  
      alert(binding.value,vnode);  
    });  
  }  
});
1
2
3
4
5
6
7
8
9

2、在main.js中引入import "@/directive/v.directive.js"
3、在页面中使用

<template>
  <div class="container">
     <a v-click-me="'message'">按钮2</a>
  </div>
</template>
1
2
3
4
5

局部注册指令

除此之外，还可以局部注册指令

<template>
  <div class="container">
     <a v-auth="'message'">按钮2</a>
  </div>
</template>

export default {
  directives: {
    auth: { 
      bind (el, binding, vnode) {    
          alert(binding.value,vnode);  
      } 
    }  
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

应用场景

做权限验证时，我们需要根据用户身份来判定是否显示一些元素的显示，比如后台管理只有管理员才能新增角色，那么只有用户角色是管理员时，新增按钮才会显示，这时候就可以使用自定的指令。

自定义指令传入一个字符串比如

把我们获取到的用户的权限信息与字符串做比较

如果不相同，将元素的样式设置为display:none

//处理自定义指令的文件
import { useGlobalUserStore } from '@store/UseGlobalStore'
export const AuthDic = {
    name:'add',
    mounted(el,binding){
        let permissions = useGlobalUserStore().permissions;
        let val = binding.value; //'add_add'
        console.log( val,'value' )
        if( !val ) {
            throw '该字段必须传值'
        }

        //判断当前用户是否时超管 这两类用户都是有权限
        if( permissions.includes("*:*:*") ) return
        if( permissions.includes(val) ) return

        //没有权限
        const parent = el.parentElement
        parent && parent.removeChild(el)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

也可以

export default {
	directives: {
		auth: (el, binding) => {
			if (!getCookie("userName")) {
				el.style.display = "none";//先判断是否登陆，没登陆都不显示
			} else {
				let roleName = getCookie("roleName");//用来区分用户角色
				if (roleName === binding.value) {
					el.style.display = "block"; //判断当前用户角色和传入的角色是否相等，相等则显示
				} else {
					el.style.display = "none";
				}
			}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注：上面这种写法是一种简写，因为bind和update的方法一致。