iOS Style Confirm Dialog For Vue.js

Install & Download:

# NPM
$ npm install vue-confirm-dialog --save

Description:

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