vue3自定义指令方法根据缓存等设置全局按钮显示隐藏

原创已于 2024-03-29 16:37:15 修改 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-03-29 16:34:59 首次发布

文章介绍了如何在Angular应用中使用自定义指令(has-accountCategory)来控制按钮显示，根据用户存储的accountCategory权限判断是否显示‘编辑’按钮。如果账户类别不是2，按钮将被隐藏。

在mian.ts中

app.directive('has-accountCategory', {
    mounted(el, binding) {
//传值打印
  console.log(binding.value);
 //获取权限
        const accountCategory = JSON.parse(sessionStorage.getItem('userInfo')).accountCategory
//权限判断
        if (accountCategory != 2) {
            el.style.display = 'none'; // 如果没有权限，隐藏按钮  
        }
    },
//更新页面使用 没用到不知道啥意思
    // updated(el, binding) {  
    //     this.componentUpdated(el, binding); // 当权限变化时重新评估  
    //   }  
});

页面使用

 <el-button v-has-accountCategory link type="primary">
            编辑
          </el-button>
//或者直接传值判断
 <el-button v-has-accountCategory='1' link type="primary">
            编辑
          </el-button>