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