vue 自定义指令与v-if冲突问题

vue 自定义指令与v-if冲突问题

问题 ： 当同时存在 v-if 和自定义隐藏的指令（后面统一称为v-power） el 会被删除，单元素上的指令依旧会执行，修改的是上一个元素的显示影藏

解决：

第一种方式，将v-if 替换为v-show，这样元素一直存在，就不会出现问题，(如果你的自定义指令会动态改变display属性，那就可能和v-show冲突 v-show是通过display：none来控制影藏，这点需要注意，只是单一的影藏，就不需要考虑了)

第二种方式，将v-if指令合并到自定义中 传入一个对象；

改指令实现通过传入的对象来实现是否需要影藏,

<div v-power="{power:1,vIf:true}"></div>

Vue.directive('power', {
  update: function (el, binding, vnode) {
    vnode.context.$nextTick(()=>{
    const power = [1,2,3,4]

    const data  = binding.value // 获取绑定的值
    console.log('power',power);
    console.log('data',data);
  
     //存在v-if 指令使用，合并指令，
        if(data.vIf){
          //权限数组中不存在表示影藏
          if (!data.power.includes(power)) {
            el.style.display = "none"
          }
        }else{
          el.remove() //v-if 为false 删除元素，模拟v-if
          
        }
     })
  }
})