Sweet Alert - 带动画效果的对话框

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Sweet Alert 是一个漂亮的,带动画效果的,显示警告提醒信息的对话框组件。 先为项目安装一下 Sweet Alert ,进入到项目的目录,输入 .. npm install sweetalert ..

打开项目里的一个 html 文档 .. 在这上面使用 Sweet Alert,要去链接它的一个 css 文件,还有一个 js 文件 .. 这个 css 文件的位置是在 node_modules/sweetalert/dist/sweetalert.css ..

再去链接 js 文件 .. 位置是 node_modules/sweetalert/dist/sweetalert.min.js .. 然后去试一下这个组件 ..

可以使用 swal 这个函数,它是 Sweet Alert 的简写形式 .. 给一个方法一个参数,这个参数就是要在对话框里显示的内容 .. 好友请求 ..

保存 ... 会在页面上弹出一个对话框 .. 上面会显示一个标题, Hello .. 点击 ok 可以关掉这个对话框 .. 在这个标题的下面可以再添加点文字 .. 可以把这些文字作为 swal 的第二个参数 .. 逗号分隔一下 .. 你好吗?

这个文字会显示在标题的下面 .. 我们也可以把这个信息设置成一个成功的信息 .. 给 swal 设置一下第三个参数 .. 参数的值是 success ... 你会看到一个动画效果显示的对号 ..

我们也可以把它设置成一个警告类型的信息 .. 把 success 换成 warning ... 在这个对话框上面会显示一个叹号图标 ..

再试一下错误信息 .. 用一下 error ... 现在会用一个动画效果显示一个错误符号 ..

Sweet Alert - 带动画效果的对话框《 前端库 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点