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