vue实战

Vue根据权限获取页面按钮显示与隐藏

2022-08-12 15:27:48 更新   浏览量: 548
上一章:Vue使用sm4加密解密 下一章:错误信息放到一个.txt文件

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
}
}

运行预览 »

console.log(myBtns)的打印结果如下图所示:


第二步:我们需要在vue项目中的main.js引入我们封装的组件

我们的hasBtn.js在src下面的common文件夹下存放

import {hasBtn} from '@/common/hasBtn.js'

Vue.prototype.hasBtn = hasBtn

第三步:在需要使用的界面使用v-if='hasBtn('resBtn1')'

resBtn1是刚才数组中btns里面的一个按钮编号,具体的以项目返回数据为准

扫二微码
上一章:Vue使用sm4加密解密 下一章:错误信息放到一个.txt文件

最近更新 免责声明 关于我们

Copyright © 2004-2021 前端教程 qianduan.cn All Rights Reserved   陕ICP备2021014585号-1 陕公网安备 61012402000223号 前端教程

友情链接:  前端工具 前端插件