我是vuejs的新手。我正在尝试创建我的第一个应用程序。我想在每次点击按钮时显示确认消息。
示例:
<button class="btn btn-danger" v-on:click="reject(proposal)">reject</button>
我的问题是:我可以延长v-on:click
事件以显示所有地方的确认吗?我会使我的自定义指令v-confirm-click
首先执行确认,然后,如果我点击“确定”,则执行click事件。有可能吗?
答案 0 :(得分:6)
我会推荐一个组件。 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>
答案 1 :(得分:0)
我不知道扩展指令的方法。在单击处理程序中包含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>