Vue 3 自定义权限指令 v-action的作用

/**
 * 根据权限（binding）决定 el 的显示隐藏
 * @param {*} el 指令绑定的 DOM 元素，Vue 传递给指令的 el 参数
 * @param {*} binding 指令的绑定值对象，包含传递指令的值。比如：v-action="'actionCode'"，那么 binding.value 就是 'actionCode'。
 * @returns
 */
function updateVisibility(el, binding) {
  // 获取权限列表
  const { _actions } = window;
  // 如果没有指定权限值，默认「显示」
  if (!binding.value) {
    el.style.display = '';
    return;
  }
  // 根据权限判断是否隐藏
  el.style.display = _actions && !_actions.includes(binding.value) ? 'none' : '';
}
// action：自定义指令对象
const action = {
  // 指令绑定的元素被插入到 DOM 时触发
  mounted(el, binding) {
    updateVisibility(el, binding);
  },
  // 当组件 props 或 data 发生变化导致 DOM 更新 时触发。
  updated(el, binding) {
    updateVisibility(el, binding);
  },
};
// 注册全局指令
export default {
  install(app) {
    // 在 Vue 应用上 注册全局指令 v-action，让所有组件都可以使用 v-action 来控制元素的显示。
    app.directive('action', action);
  },
};

<template>
  <button v-action="'_EDIT'">编辑</button>
</template>