一、在src/directive新建文件夹
<el-button
type="warning"
icon="el-icon-download"
size="mini"
v-hasPermi="['wm:wmstock:export']"
>导出</el-button>
二、定义index.js文件,在vue上注入自定义指令
import hasPermi from './permission/hasPermi'
const install = function(Vue) {
Vue.directive('hasPermi', hasPermi)
}
if (window.Vue) {
window['hasPermi'] = hasPermi
Vue.use(install); // eslint-disable-line
}
export default install
三、编写自定义指令
/**
* v-hasPermi 操作权限处理
*/
import store from '@/store'
export default {
inserted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
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(`请设置操作权限标签值`)
}
}
}
四、main.js中引用directive
import Vue from 'vue'
import directive from './directive'
Vue.use(directive)
new Vue({
el: '#app',
render: h => h(App)
})
五、使用
<el-button
type="warning"
icon="el-icon-download"
size="mini"
v-hasPermi="['wm:wmstock:export']"
>导出</el-button>