扩展vueJs指令v-on:单击

Question

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

例:

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

我的问题是:我可以扩展v-on:click活动以显示所有地方的确认吗？我会调用我的自定义指令v-confirm-click,首先执行确认,然后,如果我点击"确定",则执行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>