Vue2/Vue3实现按钮权限 ---自定义指令/全局函数

按钮权限 :两种方式 自定义自定/全局函数

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 ----> 类似第二种