vue中this.$confirm的使用及說明
更新時間：2024年08月22日 09:52:05 作者：皮皮皮皮克斯
這篇文章主要介紹了vue中this.$confirm的使用及說明方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue中this.$confirm
筆記整理：
之前項目中比較常見的confirm確認框?qū)懛?，（與this.$router相似）
VUE+elementUI寫法
onStopClick(row: any) {
**this.$confirm**('確定停用該條消息嗎 ?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.requestSwitchStatus(row)
})
.catch(() => {})
}換成ant Design Vue時寫法
handleDelete(record) {
this.$confirm({
title:'確認刪除嗎？',
okText: '是',
cancelText: '否',
icon: 'exclamation-circle',
confirm: this.handleClear()
})
}VUE+VUX 寫法：（參考VUX文檔~）
this.$vux.confirm.show({
title: 標題,
content: content,
onCancel() {
let url = window.location.href
if (url.indexOf('isApp') > -1) {
_this.goNV({type: ''})
} else {
_this.$router.push('/home')
}
},
onConfirm() {
_this.crushEggRequest(param)
}
})```
vue項目中this.$confirm中，確定和取消執(zhí)行不同的邏輯
效果圖片
【確定】按鈕執(zhí)行邏輯A，【取消】按鈕執(zhí)行邏輯B。
[x]按鈕關(guān)閉confirm，和取消按鈕執(zhí)行不同的邏輯
代碼如下：
this.$confirm("是否確定刪除選中的數(shù)據(jù)?", "提示", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning",
distinguishCancelAndClose: true, // 重要，設(shè)置為true才會把右上角X和取消區(qū)分開來
closeOnClickModal: false
}).then(function () {
// TODO 確認通過執(zhí)行邏輯
}).catch(function (e) {
if (e == 'cancel') {
// TODO 確認不通過執(zhí)行邏輯
} else if(e == 'close') {
// TODO 右上角X的執(zhí)行邏輯
}
})
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue使用Vue-cropper實現(xiàn)圖片裁剪，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了vue-cli點擊實現(xiàn)全屏功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了Vue-Router的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue獲取form表單的值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue $set 實現(xiàn)給數(shù)組集合對象賦值
這篇文章主要介紹了vue $set 實現(xiàn)給數(shù)組集合對象賦值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
封裝組件相信對大家來說都不陌生了,下面這篇文章主要給大家介紹了關(guān)于用VUE封裝一個文本滾動組件的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
vue3簡單封裝input組件和統(tǒng)一表單數(shù)據(jù)詳解
最近有一個需求是很多個表單添加,編輯等操作,會用到很多input輸入框,所以就想把input進行簡單封裝,這篇文章主要給大家介紹了關(guān)于vue3簡單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-05-05
今天小編就為大家分享一篇vue-form表單驗證是否為空值的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
基于vue-element組件實現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實現(xiàn)音樂播放器功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題
vue-quill-editor默認插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長，就會比較煩惱，接下來通過本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長的問題及解決方法,需要的朋友可以參考下2018-08-08