vue 权限按钮显示隐藏 (组件法)

咱们做后台管理系统肯定避免不了权限菜单权限按钮的显示与隐藏我分享一下我的实现:

创建一个权限显示隐藏的公共组件

<template>
  <div>
    <slot v-if="isShow" />
  </div>
</template>

<script>
  export default {
    props: {
      authItem: {
        type: [String, Array], //类型
        required: true, //必要性
      },
    },
    data() {
      return {
        isShow: false,
      }
    },
    created() {
      const authArr = this.$router.history.current.meta.btnPermissions
      const authItem = this.authItem
      if (Object.prototype.toString.call(this.authItem) === '[object Array]') {
        // 数组
        if (
          JSON.stringify(authArr.sort()) === JSON.stringify(authItem.sort())
        ) {
          this.isShow = true
        } else {
          this.isShow = false
        }
      } else {
        //字符串
        authArr.forEach((i) => {
          authItem == i ? (this.isShow = true) : (this.isShow = false)
        })
      }
    },
  }
</script>

这里我用的是直接从路由数组中拿到该页的按钮权限标记

拿到使用权限按钮组件的该页按钮权限标记数组然后就可以进行判断

这里我做了判断传过来的是单个字符串或者数组

如果接收的是单个字符串咱们就查看权限标记数组里面是否有这个字符串有就显示没有就隐藏
如果接收的是数组咱们就对比传过来的数组和权限标记数组是否内容相同相同就显示反之隐藏

使用:

这里我传的是数组必须该页权限数组和咱们传的这个数组一样才会显示

组件可以局部注册也可以全局注册大家都会我就不做介绍了哈

vue 权限按钮显示隐藏 (组件法)

悦读