87,993
社区成员
发帖
与我相关
我的任务
分享关于vue自定义指令控制元素显隐藏的问题
Vue.directive('haha', {
1.
// bind: function (el, binding, vnode, oldVnode) {
// let id = options.state.userInfo.uid;
// let className = el.getAttribute("class");
// className = className.concat(" hidden");
// el.setAttribute("class", className)
// authoxCheck(binding.value, id).then(function () {
// className = className.replace("hidden", "");
// el.setAttribute("class", className);
// }).catch(function () {});
// },
2.
// inserted: function (el, binding, vnode, oldVnode) {
// let id = options.state.userInfo.uid;
// authoxCheck(binding.value, id).then(function () {}).catch(function () {
// el.parentNode.removeChild(el);
// });
}
})
控制dom元素显隐藏的处理：1，bind钩子函数里添加display:none样式；
2，inserted钩子函数里删除该元素；
应用场景：权限相关，没有操作权限就不显示该dom元素（可能是按钮，也可能是超链接等）
问题：抛开1中会出现在控制台取消样式后会显示出该元素的问题，以上两种方式哪种会更好？效率会更高一点？或者有没有更好的方式实现该应用场景？
1.
// bind: function (el, binding, vnode, oldVnode) {
// let id = options.state.userInfo.uid;
// let className = el.getAttribute("class");
// className = className.concat(" hidden");
// el.setAttribute("class", className)
// authoxCheck(binding.value, id).then(function () {
// className = className.replace("hidden", "");
// el.setAttribute("class", className);
// }).catch(function () {});
// },
2.
// inserted: function (el, binding, vnode, oldVnode) {
// let id = options.state.userInfo.uid;
// authoxCheck(binding.value, id).then(function () {}).catch(function () {
// el.parentNode.removeChild(el);
// });
}
})
控制dom元素显隐藏的处理：1，bind钩子函数里添加display:none样式；
2，inserted钩子函数里删除该元素；
应用场景：权限相关，没有操作权限就不显示该dom元素（可能是按钮，也可能是超链接等）
问题：抛开1中会出现在控制台取消样式后会显示出该元素的问题，以上两种方式哪种会更好？效率会更高一点？或者有没有更好的方式实现该应用场景？
...全文
请发表友善的回复…
发表回复
讨厌走开啦 2019-03-01
- 打赏
- 举报
看你的应用场景，如果权限可以实时变更（如果有个按钮可以控制权限变化）导致dom可能会发生隐藏显示状态变化，则第一种方式合适，如果dom状态基本不会发生变化，且内容又相对敏感，则第二种方式合适。
