vue 自定义指令，控制按钮的显示隐藏

1. 创建showIfButton.js  将逻辑梳理进去

export default {
    bind(el, binding) {    // el当前元素，binding 传入的参数
      checkAndSetDisplay(el, binding);
    },
    update(el, binding) {
      checkAndSetDisplay(el, binding);
    }
  };

  function checkAndSetDisplay(el, binding) {
    const buttonArray = JSON.parse(sessionStorage.getItem(  'LOGIN_USER_BUTTON_AUTH' )) || [];
    console.log(  'buttonArray' , buttonArray);
    const buttonId = binding.value;
    console.log(  'buttonId' , buttonId);
  
    const hasButton = buttonArray.some(button => button.action === buttonId);  //这里的action是数组对象的属性与传入的参数一致
    if (!hasButton) {
      el.style.display =   'none' ;
    }   else {
      el.style.display =   '' ;
    }
  }

2. 在main.js 引入并注册指令名称

3. 在代码中使用该指令

<a-button v-show-if-button="'store:add'" type="primary" @click="addStore">添加门店</a-button>