扩展 Vue.js v-on:click 指令答案

【问题标题】：Extend Vue.js v-on:click directive扩展 Vue.js v-on:click 指令
【发布时间】：2017-12-31 14:35:34
【问题描述】：

我是vuejs 的新手。我正在尝试创建我的第一个应用程序。我想在每次点击按钮时显示一条确认消息。

例子：

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

我的问题是：我可以扩展v-on:click 事件以在任何地方显示确认吗？我将创建名为v-confirm-click 的自定义指令，它首先执行确认，然后，如果我单击“确定”，则执行单击事件。有可能吗？

【问题讨论】：

标签： vuejs vue.js vue-directives

【解决方案1】：

我不知道扩展指令的方法。在点击处理程序中包含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>

【讨论】：

谢谢 roy，这是一种方法，但我更喜欢按照 Bert Evans 的建议创建一个组件，无论如何谢谢！ :)

【解决方案2】：

我会推荐一个组件。 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>

【讨论】：