使用场景
需要进行权限管理的组件或元素进行显示/隐藏和点击事件拦截
使用自定义指令与data-*
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| const rights = {}
rights.install = function(vue) { vue.directive('right-click', { inserted(el, binding, vNode) { roleClickChange(el, binding, vNode) }, componentUpdated(el, binding, vNode) { roleClickChange(el, binding, vNode) } }) } const roleClickChange = (el, binding, vNode) => { const tag = vNode.data.attrs['data-pre'] if (typeof binding.value !== 'function') { const compName = vNode.context.name let error = `[right-click:] provided expression '${binding.expression}' is not a function` if (compName) { error += `Found in component '${compName}' ` } console.error(error) return } el.onclick = function(e) { const evt = e || window.event if (evt.stopPropagation) { evt.stopPropagation() } else { evt.cancelBubble = true }
if (binding.arg === undefined) { binding.value(true) } else { } } }
export { rights }
|
使用组件
权限组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <template> <div v-if="isShow"> <slot :handleClick="handleClick"> 需要处理权限的组件 </slot> </div> </template>
<script> export default { name: 'Btn', props: { isShow: { type: Boolean, default: true } }, methods: { handleClick() { console.log(11) } } } </script>
|
使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| <template> <btn :pre="1"> <template slot-scope="{ handleClick }"> <div @click="handleClick(a)"> 按钮 </div> </template> </btn> </template>
<script> export default { name: 'Index', methods: { a() { console.log(111) } } } </script>
|
区别 |
directive |
components |
能否控制按钮的隐藏 |
✅,隐藏修改el.style.display=’none’,按钮卸载使用el.remove() |
✅,隐藏使用v-show,卸载使用v-if |
对原来的代码的影响 |
小,只需要添加自定义指令和data-* |
大,需要在原来的按钮之外包裹一层组价 |
使用场景 |
按钮一直显示,只对按钮的出发时间进行权限判断 |
会依照权限显示/隐藏按钮 |
优点 |
对原代码改动少 |
能在封装组件中使用其他的封装好的组件 |
缺点 |
使用弹窗或消息提示之类的组件繁琐 |
对原代码改动较大 |