Vue中实现按钮权限判断的方法

在Vue中，可以通过以下几种方法来实现按钮权限判断：

1. v-if指令

使用v-if指令可以根据条件来渲染DOM元素。在模板中使用v-if指令，根据当前用户的权限来判断是否渲染该按钮。

可以在Vue组件中使用以下代码：

<template>
  <div>
    <button v-if="checkPermission('delete')">删除</button>
    <button v-if="checkPermission('add')">添加</button>
  </div>
</template>

<script>
export default {
  methods: {
    checkPermission(permission) {
      // 根据当前用户的权限判断是否有操作权限
      // 如果有权限，返回true，否则返回false
    },
  },
};
</script>

在上面的代码中，通过checkPermission方法来判断当前用户是否有删除和添加的权限，如果有权限则渲染相应的按钮。

2. 自定义指令

可以通过自定义指令的方式来实现按钮权限判断。在自定义指令中根据当前用户的权限来控制按钮的可用状态。

可以在Vue组件中使用以下代码：

<template>
  <div>
    <button v-permission="'delete'">删除</button>
    <button v-permission="'add'">添加</button>
  </div>
</template>

<script>
Vue.directive('permission', {
  inserted: function(el, binding, vnode) {
    // 根据当前用户的权限判断是否有操作权限
    // 如果没有权限，则设置按钮为禁用状态
    if (!checkPermission(binding.value)) {
      el.disabled = true;
    }
  },
});

export default {
  methods: {
    checkPermission(permission) {
      // 根据当前用户的权限判断是否有操作权限
      // 如果有权限，返回true，否则返回false
    },
  },
};
</script>

在上面的代码中，通过自定义指令v-permission来判断当前用户是否有删除和添加的权限，如果没有权限，则设置相应的按钮为禁用状态。

3. mixin混入

可以通过mixin混入的方式来实现按钮权限判断。在mixin中定义一个checkPermission方法，然后在需要判断权限的组件中使用该mixin。

可以在Vue组件中使用以下代码：

<template>
  <div>
    <button v-if="checkPermission('delete')">删除</button>
    <button v-if="checkPermission('add')">添加</button>
  </div>
</template>

<script>
const permissionMixin = {
  methods: {
    checkPermission(permission) {
      // 根据当前用户的权限判断是否有操作权限
      // 如果有权限，返回true，否则返回false
    },
  },
};

export default {
  mixins: [permissionMixin],
};
</script>