投稿

SimpleAlert–超漂亮Vue.js动画提示框组件

Vedu • • 资源分享 • 阅读 1591

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

超漂亮 Vue.js 动画提示框组件SimpleAlert

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

超漂亮 Vue.js 动画提示框组件SimpleAlert

特性

  • 提供类似Dom window的方法：alert()、confirm()、prompt()
  • 基于vue2 sweetalert2开发
  • 通过基于Promise的接口
  • 支持TypeScript
超漂亮 Vue.js 动画提示框组件SimpleAlert

安装

$ 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
});
超漂亮 Vue.js 动画提示框组件SimpleAlert

高级用法

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

this.$fire({
  title: "Title",
  text: "text",
  type: "success",
  timer: 3000
}).then(r => {
  console.log(r.value);
});
超漂亮 Vue.js 动画提示框组件SimpleAlert
超漂亮 Vue.js 动画提示框组件SimpleAlert
超漂亮 Vue.js 动画提示框组件SimpleAlert
超漂亮 Vue.js 动画提示框组件SimpleAlert
超漂亮 Vue.js 动画提示框组件SimpleAlert

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

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

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

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

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

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/17842.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-12-20 17:49
下一篇 2020-12-21 07:31

相关推荐

发表评论

登录后才能评论