2018年3月22日:开源日报第14期

每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文,欢迎关注开源日报。交流QQ群:202790710;电报群 https://t.me/OpeningSourceOrg

今日推荐开源项目

《JS消息对话框插件SweetAlert2》

推荐理由:SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类,功能非常强大。

简介

SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种情景模式的模态对话框。

安装

可以通过bower或npm来安装sweetalert2对话框插件。

使用

基本使用:

基本的使用方法是使用通过swal()来弹出一个对话框。

如果要弹出一个带情景模式的对话框,情景模式类型可以如下在第三个参数中设置。

swal(…)会返回一个Promise对象,该Promise对象中then方法中的isConfirm参数的含义如下:

·true:代表Confirm(确认)按钮。

·false:代表Cancel(取消)按钮。

·undefined:代表按下Esc键,点击取消按钮或在对话框之外点击。

模型对话框的类型

sweetalert2提供了5种情景模式的对话框。

效果演示

嵌入函数的弹窗

链式弹窗示例

通过SweetAlert2还可以实现各种效果,如定时关闭,自定义弹窗的大小,背景,加入动画等等,更多的效果演示和具体操作可以访问SweetAlert2的官网

链接:https://sweetalert2.github.io/

浏览器兼容性

*应包括ES6 Promise polyfill,请参阅使用示例。

需要注意的是SweetAlert2 不且将不提供任何形式的IE10和更低的支持或功能。

相关的github项目

·avil13 / vue-sweetalert2 – Vue.js

包装

·softon / sweetalert – Laravel 5 Package

·alex-shamshurin / sweetalert2-react – 反应组件

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180322G12G3G00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励