插件名称 | vue-confirm-dialog |
---|---|
发布时间 | 2020年4月23日 |
插件作者 | aslanon |
适用于Vue.js应用程序的简单iOS样式确认对话框组件。
# NPM
$ npm install vue-confirm-dialog --save
1.将确认对话框导入项目。
import Vue from 'vue'
import VueConfirmDialog from 'vue-confirm-dialog'
2.注册组件。
Vue.use(VueConfirmDialog)
3.在页面中创建确认对话框组件。
<template>
<div class="grid">
<ul>
<li v-for="(item, i) in list" :key="item.id">
<span class="item">
{{item.text}}
<button @click.stop="showConfirm(item)">Delete</button>
</span>
</li>
</ul>
</div>
</template>
4.例子。
export default {
name: "Example",
data() {
return {
list: [
{ text: "item 1", id: 1 },
{ text: "item 2", id: 2 },
{ text: "item 3", id: 3 }
]
};
},
methods: {
showConfirm(item) {
let self = this;
this.$vueConfirm.confirm(
{
message: `Are you sure? ${item.text} will be remove?`,
button: {
no: "No",
yes: "Yes"
}
},
function(confirm) {
if (confirm == true) {
for (let i = 0; i < self.list.length; i++) {
if (self.list[i].id == item.id) {
self.list.splice(i, 1);
self.$vueConfirm.close();
break;
}
}
}
}
);
}
}
};