插件名称 | 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.创建一个警报对话框,并返回一个承诺,单击“确定”按钮后即可解决。可能的参数:
// alert(message, title, type)
this.$alert("提示消息");
4.创建一个确认对话框并返回一个承诺,单击“确定”按钮后即可解决。可能的参数:
// confirm(message, title, type, reverseButton)
this.$confirm("你确定吗?").then(() => {
//代码块
});
5.创建一个提示对话框,并返回一个承诺,单击“确定”按钮后即可解决。可能的参数:
// 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);
});