Sweet Alert 的高级应用

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

在 Sweet Alert 的对话框上面,可以显示一个确定的按钮,也可以有一个取消按钮,我们还可以为这些按钮绑定更具体要做的事情。先去配置一下确认按钮 .. 现在它上面的文字是 OK .. 背景是浅蓝色的 ..

在这个 swal 函数的配置对象里 .. 添加一个 confirmButtonText 属性 .. 它的值就是确认按钮上的文字 .. 设置成 接受 .. 再定制一下按钮的背景 .. 用一个 confirmButtonColor .. 这个属性的值是一个颜色 .. 用一种紫罗兰的颜色 .. #6435c9

现在对话框上的确认按钮的文字是 接受 ,背景颜色是紫罗兰 .. 下面再去给这个确认按钮绑定一个要做的事情 .. 先在这个配置对象里添加一个 closeOnConfirm 属性 .. 设置成 false .. 这样点击确认按钮以后不会关掉对话框 ..

然后给 swal 函数再设置一个参数 .. 这个参数的值可以是一个匿名函数 .. 在这里面,可以设置一下点击了确定按钮以后要做的事情 .. 这样可以再用一个 swal 函数,设置一个新的对话框 .. 标题是 成功! 文字是 您已经成为了 hulk 的好友 .. 类型是 success .. 点击 接受 .. 会弹出一个新的对话框 ...

下面再去给对话框添加一个取消的按钮 .. 用一个 showCancelButton .. 它的值设置成 true .. 再用一个 cancelButtonText 设置一下取消按钮上的文字 .. 设置成 拒绝 ..

再添加一个 closeOnCancel .. 设置成 false .. 然后在这个匿名函数里,给它一个参数 .. isConfirm .. 如果用户点击的是 确认 按钮,它的值就会是 true .. 所以可以去判断一下 .. if isConfirm .. 如果是就再显示一个成功的对话框 ... 如果不是 .. else ... 显示另外一个对话框 ..

设置一下这个对话框里的内容 .. 拒绝 .. 您拒绝了 hulk 的好友请求 .. 类型是 error .. 点击 接受,会显示一个成功类型的对话框 .. 再试一下,这次点击 拒绝 这个按钮 .. 会显示一个错误类型的对话框 ..

Sweet Alert 的高级应用《 前端库 》

统计

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

社会化网络

关于

微信订阅号

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