vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
vue+el使用this.$confirm不能阻斷代碼往下執(zhí)行
在vue+element ui的前端框架中使用el的confirm彈窗，遇到一個(gè)問題，就是連續(xù)多個(gè)彈窗提示一些信息，要是點(diǎn)擊確定繼續(xù)向下執(zhí)行，點(diǎn)擊取消就退出整個(gè)方法。
這時(shí)發(fā)現(xiàn)當(dāng)代碼執(zhí)行到this.$confirm彈窗時(shí)，彈出彈窗后，繼續(xù)執(zhí)行了彈窗之后的代碼，沒有等到彈窗點(diǎn)擊確定或是取消之后再執(zhí)行。
具體解決
其實(shí)解決辦法也很簡(jiǎn)單，因?yàn)閠his.$confirm也是一個(gè)promise方法，所以可以使用es6中的await等到返回結(jié)果。
await 表達(dá)式會(huì)暫停當(dāng)前 async function 的執(zhí)行，等待 Promise 處理完成。
......
if(await this.$confirm('是否保存修改？', '確認(rèn)信息', {
? ?distinguishCancelAndClose: true,
? ?confirmButtonText: '保存',
? ?cancelButtonText: '取消'
?}).catch(() => {}) !== 'confirm') {
?? ?return
}
// 點(diǎn)擊取消退出方法，點(diǎn)擊保存則繼續(xù)往下執(zhí)行
// 若沒有await，在彈出彈窗的同時(shí)就會(huì)接著往下執(zhí)行
this.doSaveInfo()
......后記
看官方文檔學(xué)習(xí)一定要看仔細(xì)，看明白。認(rèn)真學(xué)習(xí)promise和await。
使用this.$confirm換行顯示提示信息
在寫一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊確認(rèn)框信息的時(shí)候，發(fā)現(xiàn)換行不能用\n。用了< br>發(fā)現(xiàn)也是字符串的輸出形式
去查了下發(fā)現(xiàn)需要使用$createElement來創(chuàng)建
這里我需要顯示兩行信息
代碼如下
creatNew(){
?const h = this.$createElement
? ? ? ? this.$confirm('提示', {
? ? ? ? ? title: '提示',
? ? ? ? ? message: h('div', [
? ? ? ? ? ? h('p', '新建會(huì)導(dǎo)致之前設(shè)置失效'),
? ? ? ? ? ? h('p', '是否繼續(xù)新建？')
? ? ? ? ? ]),
? ? ? ? ? confirmButtonText: '確定',
? ? ? ? ? cancelButtonText: '取消'
? ? ? ? }).then(() => {
? ? ? ? ....//調(diào)用新建方法
? ? ? ? }).catch(()=>({}))//不要忘記catch
? ? ? ? //最后可以.finally(()=>({}))
? ? ? ? }解釋
★h('div')就表示創(chuàng)建一個(gè)div標(biāo)簽，
★如果寫成h('div',{class:'...'})就可以定義class，如：
?h('i', { class: 'el-icon-question' })★如果寫成下面的，則可以定義props。（以element的彈出框el-tooltip為例）
h('el-tooltip',{props:{
?? ??? ??? ??? ??? ?content: (function() {
? ? ? ? ? ? ? ? ? ?? ?return '彈出信息'
? ? ? ? ? ? ? ? ? ?? ?})(),
? ? ? ? ? ? ? ? ?? ?placement: 'top'
? ? ? ? ? ? ? ? ?? ?}})★包含關(guān)系用h('div',[...])，如div中包含兩個(gè)p標(biāo)簽：（可以繼續(xù)嵌套）
h('div', [
? ? ? ? ? ? h('p', '第一個(gè)p'),
? ? ? ? ? ? h('p', '第二個(gè)p')
? ? ? ? ? ])簡(jiǎn)單介紹到這里吧~
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue父子組件傳值問題，文章中有詳細(xì)的示例代碼，感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要介紹了vue中路由的前進(jìn)和后退問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證代碼詳解
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證的相關(guān)資料,Vue可以通過使用組件化的方式來實(shí)現(xiàn)表格的增刪改查功能,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue-router路由參數(shù)刷新消失的問題解決方法
本篇文章主要介紹了vue-router路由參數(shù)刷新消失的問題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專門調(diào)試vue項(xiàng)目的調(diào)試工具,安裝成功之后,右邊會(huì)出現(xiàn)一個(gè)vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關(guān)于Vue調(diào)試工具vue-devtools的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue監(jiān)聽滾動(dòng)條頁面滾動(dòng)動(dòng)畫示例代碼
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue?被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽滾動(dòng)條頁面滾動(dòng)動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2023-06-06