欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決

 更新時(shí)間：2022年09月23日 15:01:32   作者：老賊大魔王  
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue+el使用this.$confirm不能阻斷代碼往下執(zhí)行

在vue+element ui的前端框架中使用el的confirm彈窗，遇到一個(gè)問(wèn)題，就是連續(xù)多個(gè)彈窗提示一些信息，要是點(diǎn)擊確定繼續(xù)向下執(zhí)行，點(diǎn)擊取消就退出整個(gè)方法。

這時(shí)發(fā)現(xiàn)當(dāng)代碼執(zhí)行到this.$confirm彈窗時(shí)，彈出彈窗后，繼續(xù)執(zhí)行了彈窗之后的代碼，沒(méi)有等到彈窗點(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í)行
// 若沒(méi)有await，在彈出彈窗的同時(shí)就會(huì)接著往下執(zhí)行
this.doSaveInfo()
......

后記

看官方文檔學(xué)習(xí)一定要看仔細(xì)，看明白。認(rèn)真學(xué)習(xí)promise和await。

使用this.$confirm換行顯示提示信息

在寫(xiě)一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊確認(rèn)框信息的時(shí)候，發(fā)現(xiàn)換行不能用\n。用了< br>發(fā)現(xiàn)也是字符串的輸出形式

去查了下發(fā)現(xiàn)需要使用$createElement來(lái)創(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)簽，

★如果寫(xiě)成h('div',{class:'...'})就可以定義class，如：

?h('i', { class: 'el-icon-question' })

★如果寫(xiě)成下面的，則可以定義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)文章

最新評(píng)論