[英]Priority of Vue directives?
我使用了第三方组件库的表单组件,它没有禁用道具,并且我通过@click 将单击事件绑定到每个表单项,以便在单击表单项时弹出一个对话框。 但这是我的问题,在某些情况下表单项不应该是可点击的,所以我创建了一个自定义的 prevent-click 指令,如下所示:
const clickHandler = e => {
e.stopImmediatePropagation()
e.stopPropagation()
return false
}
const directive = {
bind(el, { value }) {
if (value) {
el.addEventListener('click', clickHandler, true)
}
},
update(el, { value }) {
if (!value) {
el.removeEventListener('click', clickHandler, true)
} else {
el.addEventListener('click', clickHandler, true)
}
}
}
像这样使用:
<form-item v-prevent-click="true" @click="showDialog"></form-item>
prevent-click 指令只向表单项添加一个捕获的事件侦听器,停止传播,到目前为止一切顺利,但问题是表单项有一个伪子元素,它是由 css 添加的选择器。 所以当我点击伪子元素时,由于伪子元素本身并没有派发click事件而不是form-item,所以form-item元素还是会派发事件,除了vue内置指令@click事件handler 是先绑定的,导致 addEventListener 方法的 useCapture 参数不起作用。
在 1.x 版本中,有自定义指令的优先选项,但 2.X 删除了它。 那么在内置@click之前是否有让我的自定义指令绑定?
您应该使用 Vue 的内置事件修饰符(参考这里)。 尝试这个:
<form-item @click.stop.prevent="showDialog"></form-item>
我不知道你的第三方组件框架是什么,但是如果你真的需要自己处理preventDefault
,我建议你这样做:
模板
<form-item @click="showDialog"></form-item>
脚本
methods: {
showDialog(e) {
e.preventDefault();
// Your code to display dialog...
}
}
如果您还需要将参数传递给showDialog
,请记住您可以 - 只需将事件作为第一个参数传递:
<form-item @click="showDialog($event, urData)"></form-item>
考虑将标志传递给showDialog
。 如果您无法修改showDialog
函数,请将其包装在另一个函数中:
// Your compoennt template
<form-item @click="wrappedShowDialog(true)"></form-item>
// Vue.js component
wrappedShowDialog(isAllowed) {
if (isAllowed) {
this.showDialog();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.