“Simple Alert”组件可帮助开发人员基于流行的SweetAlert 2库创建美观，灵活，可自定义的响应式警报/确认/提示对话框。

安装使用:

# Yarn
$ yarn add vue-simple-alert
# NPM
$ npm install vue-simple-alert --save

如何使用它：

1.安装并导入简单警报模块。

import Vue from "vue"
import VueSimpleAlert from "vue-simple-alert";

2.注册组件。

Vue.use(VueSimpleAlert);

3.创建一个警报对话框，并返回一个承诺，单击“确定”按钮后即可解决。可能的参数：

• message: 警报消息
• title: 警报标题
• type: 警报类型 ‘success’,  ‘error’, ‘warning’, ‘info’,  ‘question’

// alert(message, title, type)
this.$alert("提示消息");

4.创建一个确认对话框并返回一个承诺，单击“确定”按钮后即可解决。可能的参数：

• message：确认消息
• title：确认标题
• type：确认类型 “success”，“error”，“warning”，“info”，“question”
• reverseButton：如果要反转默认按钮位置，则设置为true

// confirm(message, title, type, reverseButton)
this.$confirm("你确定吗？").then(() => {
  //代码块
});

5.创建一个提示对话框，并返回一个承诺，单击“确定”按钮后即可解决。可能的参数：

• message：确认消息
• defaultText：占位符文本
• title：确认标题
• type：确认类型 “success”，“error”，“warning”，“info”，“question”
• reverseButton：如果要反转默认按钮位置，则设置为true

// prompt(message, defaultText, title, type, reverseButton)
this.$prompt("请输入你的姓名").then((text) => {
  // 用文字做一些事情
});

6.您还可以使用$fire方法创建一个自定义对话框，就像SweetAlert2 fire函数一样。

this.$fire({
  type: 'error',
  title: 'Oops...',
  text: '出了问题！',
  footer: '<a href>为什么我会有这个问题？</a>'
}).then(r => {
 console.log(r.value);
});

---

官网：https://github.com/constkhi/vue-simple-alert

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

GitHub下载：https://github.com/constkhi/vue-simple-alert/archive/master.zip