问题:
VUE自定义指令v-permisson 修改了元素是否隐藏,和v-if一起用时,
多个按钮元素同时使用v-permisson和v-if控制展示,后面的v-if=false的按钮元素被消除,其v-permisson的控制效果修改了上一个v-if=true的按钮元素。元素属性修改错位

猜测原因:
v-if=false DOM元素未创建,v-permisson的el参数实际修改操作时定位到了错误的元素上

解决:
1.合并v-v-if的参数到v-permisson参数里
2.v-permisson 支持对象传参,可以控制元素的属性 也可以 用el.remove()删除当前元素。
3.利用vue的双向绑定重新渲染DOM元素,重新刷新元素属性(未生成的元素,刷新后也可以重新生成),
具体写法元素绑定值附空值 如 this.orderList = [] ,随后在赋值实际的数据。

v-permisson 案例代码如下:
export default {
bind(el, binding) {
dateDeal(el, binding)
},
update(el, binding) {
dateDeal(el, binding)
},
unbind(el, binding) {
}
}

// 本指令与v-if冲突 删除的元素赋值会错改其他元素的属性***
function dateDeal(el, binding) {
// 数据校验
if (binding.value === null || binding.value === undefined) {
el.remove()
return
}
var permission
var condition
if (binding.value.code !== undefined) {
// 对象入参
permission = binding.value.code + ‘’
condition = binding.value.condition
}

}
调用:
666

Logo

前往低代码交流专区

更多推荐