今天给大家分享一款超酷的多功能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弹框组件,需要的不可错过哈。
# sweetalert2http://mishengqiang.com/sweetalert2/# 演示地址https://sweetalert2.github.io/# 仓库地址https://github.com/sweetalert2/sweetalert2
好了,今天就分享到这里。希望以上的分享对大家有所帮助。