Расширить директиву vueJs v-on: нажмите

Question

Я новичок в vuejs. Я пытаюсь создать свое первое приложение. Я хотел бы показать подтверждающее сообщение при каждом нажатии на кнопки.

Пример:

<button class="btn btn-danger" v-on:click="reject(proposal)">reject</button>

Мой вопрос: могу ли я продлить v-on:click событие, чтобы показать подтверждение везде? Я бы сделал свою специальную директиву под названием v-confirm-click сначала выполняется подтверждение, а затем, если я нажимаю "ОК", выполняется событие щелчка. Является ли это возможным?

Answer 1

Я бы порекомендовал компонент вместо. Директивы в Vue обычно используются для прямого манипулирования DOM. В большинстве случаев, когда вы считаете, что вам нужна директива, компонент лучше.

Вот пример компонента кнопки подтверждения.

Vue.component("confirm-button",{
  props:["onConfirm", "confirmText"],
  template:`<button @click="onClick"><slot></slot></button>`,
  methods:{
    onClick(){
      if (confirm(this.confirmText))
        this.onConfirm()
    }
  }

})

Который вы могли бы использовать так:

<confirm-button :on-confirm="confirm" confirm-text="Are you sure?">
  Confirm
</confirm-button>

Вот пример.

console.clear()

Vue.component("confirm-button", {
  props: ["onConfirm", "confirmText"],
  template: `<button @click="onClick"><slot></slot></button>`,
  methods: {
    onClick() {
      if (confirm(this.confirmText))
        this.onConfirm()
    }
  }

})

new Vue({
  el: "#app",
  methods: {
    confirm() {
      alert("Confirmed!")
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <confirm-button :on-confirm="confirm" confirm-text="Are you sure?">
    Confirm
  </confirm-button>
</div>

Answer 2

Я не знаю, как продлить директиву. Достаточно просто включить confirm вызовите обработчик кликов. Он не будет конвертировать каждый клик в подтвержденный клик, но не будет писать новую директиву; в любом случае вы должны обновить весь свой код, чтобы использовать новую форму.

new Vue({
  el: '#app',
  methods: {
    reject(p) {
      alert("Rejected " + p);
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <button class="btn btn-danger" @click="confirm('some message') && reject('some arg')">reject</button>
</div>