如何使用Vue指令防止链接或按钮中的点击事件

Question

嗨，我正在使用 vue 指令，如果元素是<a>或<button>标记，我正在尝试阻止单击事件。 所以我的问题是，这可以使用 vue 指令吗？

html

<a 
    @click.stop.prevent="displayModal()"
    v-noclick="test">
    I'm a link
</a>

Vue 指令

Vue.directive('noclick', {
    bind( elem, binding, vnode ) {

        let user = {'name': 'John Doe'}

        if( user ) {
            let hasAccess = false

            if( !hasAccess ) {
                if( elem.tagName === 'A' ) {
                    elem.addEventListener( 'click', ( event ) => {
                        //this should prevent the element on click event
                        //but not working

                        event.stopPropagation()
                        event.preventDefault()
                        event.stopImmediatePropagation()
                        return false
                    })
                    return true
                }
            }
        }
    }
}

Answer 1

Vue 在v-noclick之前首先注册@click事件，您可以在该元素上添加第二个单击事件侦听器。 当点击<a> ，将首先执行displayModal()函数，然后将执行v-noclick指令中的侦听器。 如果听众以相反的顺序注册，那么它可能会起作用。

尽管如此，看起来您尝试做的事情不应该在自定义指令中完成。 相反，您可以在单击处理程序本身中执行相同的逻辑：

<a @click="onClick">Foo</a>

onClick() {
  if (whatever) {
    this.displayModal()
  }
}

Answer 2

我找不到一种 vue 方法来做到这一点。 但是使用 js 你可以使用这样的条件序列

<a @click="cond && onClick"></a>

在这种情况下，如果 cond 等于 true 然后 onClick 将调用