Vue根据权限获取页面按钮显示与隐藏
例如后台有返回数据,插件名称是hasBtn.js。如下所示:
export function hasBtn(val) {
var array= [{ btns: [{id: 1,btn: 'resBtn1'}], hobby: '1', mj: '12' },
{ btns: [{id:2, btn: 'resBtns'}], hobby: '2', mj: '13' }]
let myBtns = [] // 存放array数组里面的btns
let resList = [] //最终返回的数据
for (let item of array) {
if (item.btns && item.btns.length >0) {
myBtns.push(...item.btns)
}
}
console.log(myBtns)
if (myBtns && myBtns.length > 0) {
for (let btns of myBtns) {
if (btns.btn) {
resList.push(btns)
}
}
return resList.indexOf(val)> -1
} else {
return false
}
}
打印效果以及完整代码请去前端教程查看,地址是https://www.qianduan.cn/web-171-7.html
第二步:我们需要在vue项目中的main.js引入我们封装的组件
我们的hasBtn.js在src下面的common文件夹下存放
import {hasBtn} from '@/common/hasBtn.js'
Vue.prototype.hasBtn = hasBtn
第三步:在需要使用的界面使用v-if='hasBtn('resBtn1')'
resBtn1是刚才数组中btns里面的一个按钮编号,具体的以项目返回数据为准
本文是前端教程qianduan.cn原创内容,如果有喜欢前端开发的朋友可以去前端教程官网查看