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

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原创内容，如果有喜欢前端开发的朋友可以去前端教程官网查看