按钮权限 :两种方式 自定义自定/全局函数
Vue2----
1.自定义指令
1). //首先在main.js中
Vue.diretive('指令名称',{
//会在指令作用的元素插入到页面完成后触发
inserted(el,binding){
// el-指令作用元素dom对象
const points=store.state.user.userInfo?.xxx //获取权限点---? 链接符-当前位置无值,后面不会执行
if(!points.includes(binding.value)){
// 移除或则禁用
el.remove()
// el.disabled=true
}
}
})
2). //在目标元素使用该指令 ----此处指令标识 需要使用 字符串
<el-button v-指令名="'指令标识'" > 自定义指令 </el-button>
2.全局函数
1). //首先在main.js中
Vue.prototype.fn = x => {
const points=store.state.user.userInfo?.xxx //获取权限点
return points.includes(x)
}
2). //在目标元素使用该指令 ----此处指令标识 需要使用 字符串
<el-button v-if="fn('指令标识')" > 自定义指令 </el-button>
Vue3 ----
<el-button v-xx="btn.user.add"></el-button>
-----
import{createApp}from 'vue'
import App from '@App.vue'
import pinia from 'pinia'
import {useUserStore} from '@store/modules/user'
const userStore=useUserStore(pinia)
const app=createApp(App)
app.directive('指令名',{
mounted(el:any,options:any){
//el ---作用的DOM元素
//options.value--指令值
if(!userStore.buttonsincludes(options.value)){
//el.remove()
el.parentNode.removeChild(el)
}
}
})
--- "然后再mian.ts中引入下这个ts文件"()
扩展 : 还有一种是mixin ----> 类似第二种