Vue 指令的優先級？

Question

我使用了第三方組件庫的表單組件，它沒有禁用道具，並且我通過@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之前是否有讓我的自定義指令綁定？

Answer 1

您應該使用 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>

Answer 2

考慮將標志傳遞給showDialog 。 如果您無法修改showDialog函數，請將其包裝在另一個函數中：

// Your compoennt template
<form-item @click="wrappedShowDialog(true)"></form-item>

// Vue.js component
wrappedShowDialog(isAllowed) {
    if (isAllowed) {
        this.showDialog();
    }
}