搜索关键字:
自定义指令传参| +"自定义指令"+"dataset"|自定义指令dataset| +"Vue"+"directives"|vue按钮权限实现
1、完整代码:
export default {
data() {
return {
// 用户ID
userpx: '',
// 页面ID
pageID: '',
// 操作权限加载标志
loaded: false,
// 操作权限
ops: []
}
},
created() {
this.getUserIDPageID();
},
methods: {
// 获取登录用户ID+页面ID
getUserIDPageID() {
this.pageID = this.$route.query.id;
console.log("页面ID",this.pageID);
if(sessionStorage.getItem("user") !== null) {
let user = JSON.parse(sessionStorage.getItem("user"));
this.userpx = user.id;
console.log("用户ID",this.userpx);
}
},
// 加载操作权限
loadAssignedOps() {
this.$axios.get("/api/operation/assignedops",{
params: {
userpx: this.userpx,
pageID: this.pageID
}
})
.then( res => {
console.log("获取操作权限返回数据:",res.data);
this.ops = res.data.data;
console.log("看一下操作数组ops:",this.ops);
console.log("包括BtnShare:",this.ops.includes("BtnShare"));
})
.catch( function(error) {
console.log(error);
});
}
},
watch: {
userpx: function(data) {
if(this.loaded) {
return;
}
console.log("userpx有值了:,在看一下this.pageID",data,this.pageID);
if(this.pageID ) {
this.loaded = true;
this.$nextTick( () => {
this.loadAssignedOps();
})
}
},
pageID: function(data) {
if(this.loaded) {
return;
}
console.log("pageID有值了:,再看一下this.userpx",data,this.userpx);
if(this.userpx) {
this.loaded = true;
this.$nextTick( () => {
this.loadAssignedOps();
})
}
}
},
directives: {
"btnOp": {
componentUpdated: function(el,binding,vnode) {
console.log("改进之后binding.value.name",binding.value.name);
console.log("改进之后binding.value.loadOps",binding.value.loadOps)
let ops = binding.value.loadOps;
console.log("看一下Ops是否包括按钮值:",ops.includes(binding.value.name),binding.value.name);
if( ops != null && !ops.includes(binding.value.name)) {
el.parentNode.removeChild(el);
}
}
}
}
}
2、后台接口"/api/operation/assignedops"
返回实际数据:
[
"BtnShare",
"BtnExp",
"BtnPrint"
]
3、判断页面按钮是否在返回值里面
4、效果图: