延长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/[email protected]/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>