聊聊vue集成sweetalert2提示組件的問題
更新時間：2021年11月03日 11:35:45 作者：gblfy
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問題，本文通過項目案例實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
一、項目集成
官網(wǎng)鏈接：https://sweetalert2.github.io
案例
1. 引入方式 CDN引入方式：
在index.html中全局引入
<script src="http://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
位置：
npm安裝方式：
npm install sweetalert2
2. 確認框封裝
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 = this
Confirm.show("刪除后不可恢復, 確認刪除 !", function () {
Loading.show()
_this.$api.delete('http://127.0.0.1:9000/business/admin/chapter/delete/' + id).then((res) => {
Loading.hide()
console.log("刪除大章列表結(jié)果:", res)
let resp = res.data
if (resp.success) {
_this.list(1)
Swal.fire(
'刪除成功!',
'刪除成功！',
'success'
)
}
})
})
5. 消息提示框使用
/**
* 點擊【保存】
*/
save() {
let _this = this
Loading.show()
_this.$api.post('http://127.0.0.1:9000/business/admin/chapter/save', _this.chapter).then((res) => {
Loading.hide()
console.log("保存大章列表結(jié)果:", res)
let resp = res.data
if (resp.success) {
$("#form-modal").modal("hide")
_this.list(1)
Toast.success("保存成功！")
} else {
Toast.warning(resp.message)
}
})
}
6.項目效果
到此這篇關(guān)于vue 集成 sweetalert2 提示組件的文章就介紹到這了,更多相關(guān)vue 集成 sweetalert2內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js實現(xiàn)的全選與全不選功能示例【基于elementui】
這篇文章主要介紹了vue.js實現(xiàn)的全選與全不選功能,結(jié)合實例形式分析了vue.js基于elementui實現(xiàn)全選與全不選功能的相關(guān)頁面渲染、初始化數(shù)據(jù)及功能函數(shù)等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue項目有時候需要根據(jù)頁面需要動態(tài)的去修改頁面標題名稱，本文就來介紹一下，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了基于vue實現(xiàn)的圓形菜單欄組件，本文通過實例代碼，圖文詳解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
雖然老早就看過很多echarts的例子,但自己接觸的項目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項目中echarts自適應問題的高級解決過程,需要的朋友可以參考下2023-05-05
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應用，這篇文章主要介紹了vue?route介紹、基本使用、嵌套路由,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了Vue監(jiān)聽數(shù)據(jù)變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
去掉vue 中的代碼規(guī)范檢測兩種方法(Eslint驗證)
我們在使用vue 腳手架時，為了規(guī)范團隊的代碼格式，會有一個代碼規(guī)范檢測，如果不符合規(guī)范就會報錯，有時候我們不想按照他的規(guī)范去寫。這時我們需要關(guān)閉,這里腳本之家小編給大家?guī)砹巳サ魐ue 中的代碼規(guī)范檢測兩種方法(Eslint驗證)，一起看看吧2018-03-03
elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo
這篇文章主要介紹了elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了怎樣查看vue-cli的安裝位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這里分享一個常用的價格格式化的一個方法，在電商的價格處理中非常的實用，具體實現(xiàn)代碼大家參考下本文2017-05-05