今天给大家分享一款超酷的多功能Vue消息弹出层组件VueSimpleAlert。

vue-simple-alert 基于vue.js+sweetalert2构建的轻量级alert、confirm、prompt提示组件。支持TS调用。

特性

• 提供类似Dom window的方法：alert()、confirm()、prompt()
• 基于vue2+sweetalert2开发
• 通过基于Promise的接口
• 支持TypeScript

安装

$ npm i vue-simple-alert -S

快速使用

// 全局引入组件
import Vue from "vue";
import VueSimpleAlert from "vue-simple-alert";
Vue.use(VueSimpleAlert);
//Vue.use(VueSimpleAlert, { reverseButtons: true });

// 使用组件
this.$alert("Hello Vue Simple Alert.");
this.$confirm("Are you sure?").then(() => {
  //do something...
});
this.$prompt("Input your name").then(text => {
  // do somthing with text
});

高级用法

可以通过$fire使用sweetalert2的fire方法。

this.$fire({
  title: "Title",
  text: "text",
  type: "success",
  timer: 3000
}).then(r => {
  console.log(r.value);
});

非常不错的一款开源Vue.js弹框组件，需要的不可错过哈。

# sweetalert2
http://mishengqiang.com/sweetalert2/

# 演示地址
https://sweetalert2.github.io/

# 仓库地址
https://github.com/sweetalert2/sweetalert2

好了，今天就分享到这里。希望以上的分享对大家有所帮助。