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