当前位置: 首页 > 知识库问答 >
问题:

vue2 - vue 自定义指令控制元素的显示隐藏,切换路由,刷新页面,添加指令的元素全部消失了?

洪飞白
2024-09-15

vue 自定义指令控制元素的显示隐藏,切换路由,刷新页面,添加指令的元素全部消失了? 怎么改呢?
使用方式

          <el-button
              v-bt-permission="[$route.path, 'uploadBg']"></el-button>
Vue.directive("bt-permission", {
  inserted: (el: any, binding: any, vnode: any) => {
    let btnPermissionList =
      vnode.context?.$store?.getters["userStore/getBtnAccess"];
    if (btnPermissionList && typeof btnPermissionList === "string") {
      btnPermissionList = JSON.parse(btnPermissionList);
    }
    const [path, code] = binding.value; // 解构赋值获取参数
    const formatPath = getLastPartAfterSlash(path);
    const hasPermission = btnPermissionList[formatPath];

    let btnVisibility = true;
    if (hasPermission) {
      btnVisibility = hasPermission.some((item: any) => {
        return item.indexOf(code) !== -1;
      });
    } else {
      btnVisibility = false;
    }
    if (!btnVisibility) {
      el.style.display = "none";
    }
  },
});

共有1个答案

拓拔松
2024-09-15

应该是业务逻辑问题吧,看你的指令代码就是到 btnPermissionList 里面找界面的权限数组,然后再去界面的权限数组里面找按钮的权限,你可以在指令中调试试试,看看 formatPath,hasPermission的值以及是否可以从hasPermission中找出对应的按钮权限,如果找不到那确实是符合期望的,就不应该显示。

 类似资料:
  • 本文向大家介绍vue全局自定义指令-元素拖拽的实现代码,包括了vue全局自定义指令-元素拖拽的实现代码的使用技巧和注意事项,需要的朋友参考一下  小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 后面肯定要补充放大缩小功能,和把定位,宽度信息保留到vuex中的state中 pS:下面看下面板拖拽之vue自定义指令,具体内容如下所述: 前

  • 本文向大家介绍jQuery控制元素隐藏和显示,包括了jQuery控制元素隐藏和显示的使用技巧和注意事项,需要的朋友参考一下 1、jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: 2、jQuery淡入淡出效果 通过 jQuery,您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法: fadeIn()

  • 隐藏所有指定的元素。 使用展开运算符(...)和 Array.forEach() 将 display: none 应用于每个指定的元素。 const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); hide(...document.querySelectorAll('img')); // Hides all

  • 本文向大家介绍jQuery控制元素显示、隐藏、切换、滑动的方法总结,包括了jQuery控制元素显示、隐藏、切换、滑动的方法总结的使用技巧和注意事项,需要的朋友参考一下 jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 hide() 和 show() 都可以设置两个可选参数:speed 和 callback。 语法:

  • 问题内容: 按下后如何隐藏“编辑”链接?当我按下编辑键时,是否还可以隐藏“ lorem ipsum”文本? 问题答案:

  • 问题内容: 我有这样的设置: 控制器广播事件 指令侦听,然后通过append将其写入DOM,并以此创建指定指令的新元素。 IE浏览器: Angular从未调用过指令 当我检查DOM(并调试)时,我看到Controller 和指令正在执行其工作,并且有新的元素。 什么不见​​了?动态创建这些元素后需要做什么来触发指令调用? 问题答案: 请参阅。您可以类似于以下方式使用此服务: 这将执行新元素的编译和

  • 本文向大家介绍JQuery显示隐藏页面元素的方法总结,包括了JQuery显示隐藏页面元素的方法总结的使用技巧和注意事项,需要的朋友参考一下 在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍。 show()方法 显示出隐藏的 <p> 元素。 toggle(

  • 简介 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素,像这样: Vue.directive('focus', { inserted: function (el)