使用场景:项目中的权限控制
- 自定义指令 index.js
import store from '@/store'
/**
* 权限指令
* @param {*} el 当前dom对象
* @param {*} binding 指令参数
*
* 指令使用 v-permissions="'code'"
* 其中 code 为传的参数
* 在指令中通过 binding.value 接收传递的参数
*/
function permissions(el, binding) {
// 获取用户的权限码
// 例如:['code','code1','code2','code3']
let permissionsList = store.state.user.permissionsList
// 获取参数
let code= binding.value
// 如果没有参数,不作操作
if (!code) return
// 判断用户是否有权限,如果有,不做任何操作,如果没有,则将当前元素删除
if (!permissionsList.includes(code))) {
el.remove();
// el.style.display='none'
}
}
export default {
// 将方法抛出去
permissions
}
- mian.js
// 注册全局指令
import Vue from 'vue'
// 引入 directive-index.js文件
import directive from '@/directive/index'
// 在mian.js中加入此代码
Object.keys(directive).forEach(key => {
Vue.directive(key, directive[key])
})
- 指令使用组件 index.vue
// 指令的使用
<template>
<div>
<div v-permissions="'code'"></div>
</div>
</template>
打赏请扫码!!