买网站名称,武昌有专业做网站,合肥培训网站建设,中国少儿编程十强学校文章目录一、项目集成1. 引入方式2. 确认框封装3. 提示框封装4. 确认框使用5. 消息提示框使用6.项目效果一、项目集成
官网链接#xff1a;https://sweetalert2.github.io
案例
1. 引入方式
CDN引入方式#xff1a;
在index.html中全局引入
script src//c… 文章目录一、项目集成1. 引入方式2. 确认框封装3. 提示框封装4. 确认框使用5. 消息提示框使用6.项目效果一、项目集成
官网链接https://sweetalert2.github.io
案例
1. 引入方式
CDN引入方式
在index.html中全局引入
script src//cdn.jsdelivr.net/npm/sweetalert211/script位置 npm安装方式
npm install sweetalert22. 确认框封装
Confirm {show: function (message, callback) {Swal.fire({title: 确认 ?,text: message,icon: warning,showCancelButton: true,confirmButtonColor: #3085d6,cancelButtonColor: #d33,confirmButtonText: 是的, 已确认!}).then((result) {if (result.isConfirmed) {if (callback) {callback()}}})}
}3. 提示框封装
Toast {success: function (message) {Swal.fire({position: top-end,icon: success,title: message,showConfirmButton: false,timer: 3000})},error: function (message) {Swal.fire({position: top-end,icon: error,title: message,showConfirmButton: false,timer: 3000})},warning: function (message) {Swal.fire({position: top-end,icon: warning,title: message,showConfirmButton: false,timer: 3000})}
};4. 确认框使用
/*** 点击【删除】*/del(id) {let _this thisConfirm.show(删除后不可恢复, 确认删除 !, function () {Loading.show()_this.$api.delete(http://127.0.0.1:9000/business/admin/chapter/delete/ id).then((res) {Loading.hide()console.log(删除大章列表结果:, res)let resp res.dataif (resp.success) {_this.list(1)Swal.fire(删除成功!,删除成功,success)}})})5. 消息提示框使用 /*** 点击【保存】*/save() {let _this thisLoading.show()_this.$api.post(http://127.0.0.1:9000/business/admin/chapter/save, _this.chapter).then((res) {Loading.hide()console.log(保存大章列表结果:, res)let resp res.dataif (resp.success) {$(#form-modal).modal(hide)_this.list(1)Toast.success(保存成功)} else {Toast.warning(resp.message)}})}6.项目效果
