vue权限控制组件

在vue中(vue2)按钮级别的权限控制较多人的解决方案为使用指令控制或v-if，但这两者都有一定的弊端：

• 使用指令控制的弊端： 当按钮没有权限时只能让按钮隐藏掉(即设置display: none)，不能让按钮消失，如果遇到懂行的人，只需将按钮的display值改为block则又可让按钮恢复可用
• 使用v-if控制的弊端： ①需要在每个使用按钮的地方定义判断有无权限的函数；②当按钮中的v-if条件过多时会增加理解代码的难度，并且还需要调用判断有无权限的函数并传递权限编码。

而使用权限控制组件就可以解决以上三个问题！
它的弊端就是：需要多包一层组件

编码解决问题

PermissionEl.vue组件代码：

使用：

export default {
  name: 'Home',
  components: {
    PermissionEl: () => import('./PermissionEl.vue')
  }
}