An easy iOS style confirmation dialog component for Vue.js applications.
How to use it:
1. Import the confirm dialog into the project.
import Vue from 'vue' import VueConfirmDialog from 'vue-confirm-dialog'
2. Register the component.
Vue.use(VueConfirmDialog)
3. Create the confirm dialog component in your app.
<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. The example.
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; } } } } ); } } };
Preview:
Changelog:
v1.0.3 (03/18/2022)
- Update
Download Details:
Author: aslanon
Live Demo: https://aslanon.github.io/vue-confirm-dialog/
Download Link: https://github.com/aslanon/vue-confirm-dialog/archive/master.zip
Official Website: https://github.com/aslanon/vue-confirm-dialog
Install & Download:
# NPM
$ npm install vue-confirm-dialog --save