自定义全局指令

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

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

Vue.directive('click-me', {  
  bind: function (el, binding, vnode) {  
    el.addEventListener('click', function () {  
      alert(binding.value,vnode);  
    });  
  }  
});

使用

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

也可以把自定义指令单独封装到一个文件里然后在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);  
    });  
  }  
});

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

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

局部注册指令

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

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

export default {
  directives: {
    auth: { 
      bind (el, binding, vnode) {    
          alert(binding.value,vnode);  
      } 
    }  
  },
}

应用场景

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

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

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

如果不相同将元素的样式设置为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)
    }
}

也可以

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";
				}
			}
		}
	}
}

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