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 強(qiáng)制組件重新渲染(重置)的兩種方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
深入理解Vue的插件機(jī)制與install詳細(xì)
這篇文章主要介紹的是深入理解Vue的插件機(jī)制與install，文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實(shí)現(xiàn)的、 Vuex，Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09
Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作
這篇文章主要介紹了Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue實(shí)現(xiàn)typeahead組件功能(非?？孔V)
本文給大家分享通過(guò)Vue寫(xiě)一個(gè)挺靠譜的typeahead組件功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue devtools的安裝與使用教程,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue中@click綁定事件點(diǎn)擊不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例
為了防止有人惡意使用腳本進(jìn)行批量操作,會(huì)設(shè)置圖片滑動(dòng)驗(yàn)證，本文就介紹了Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了vue?如何引入本地某個(gè)文件?require，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
這篇文章主要介紹了詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11