基于SweetAlert2的漂亮弹出框组件–Simple Alert

基于SweetAlert2的漂亮弹出框组件–Simple Alert
插件名称 Simple Alert
发布时间 2020年4月22日
插件作者 constkhi

“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);
});