适用于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;
              }
            }
          }
        }
      );
    }
  }
};

---

官网：https://github.com/aslanon/vue-confirm-dialog

演示：https://www.vue365.cn/code_demo.php?id=302

GitHub下载：https://github.com/aslanon/vue-confirm-dialog/archive/master.zip