Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕加載效果
- 主要使用 beforeClose 方法實(shí)現(xiàn) loading 的效果
- beforeClose MessageBox 關(guān)閉前的回調(diào),會(huì)暫停實(shí)例的關(guān)閉
function(action, instance, done) 1. action 的值為'confirm', 'cancel'或'close'。 2. instance 為 MessageBox 實(shí)例,可以通過(guò)它訪問(wèn)實(shí)例上的屬性和方法。 3. done 用于關(guān)閉 MessageBox 實(shí)例。
- 具體實(shí)現(xiàn):(
this.$confirm、this.$alert、 this.$prompt
實(shí)現(xiàn)方法一樣)
this.$prompt('名稱(chēng)', '新建表單', { confirmButtonText: '確定', cancelButtonText: '取消', beforeClose: async (action, ctx, close) => { // 如果非確認(rèn)按鈕事件,則直接關(guān)閉彈窗 if (action !== 'confirm') { close(); return; } // confirmButtonLoading 是在 elementUI-message-box下的 main.vue 文件中封裝的參數(shù) ctx.confirmButtonLoading = true; try { // ctx.inputValue 獲取 input 輸入框的值 await this.createApi(ctx.inputValue); // 提交成功后關(guān)閉窗口 close(); } catch (error) {} ctx.confirmButtonLoading = false; }, });
實(shí)現(xiàn)前:
實(shí)現(xiàn)后:
到此這篇關(guān)于Vue給 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按鈕的加載效果的文章就介紹到這了,更多相關(guān)vue按鈕的加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)當(dāng)訪問(wèn)的路由不存在時(shí)跳轉(zhuǎn)到404頁(yè)面的方法詳解
在 Vue3 中,可以使用 Vue Router 實(shí)現(xiàn)跳轉(zhuǎn)到 404 頁(yè)面,即當(dāng)用戶訪問(wèn)一個(gè)不存在路由時(shí),系統(tǒng)會(huì)默認(rèn)跳轉(zhuǎn)到 404 頁(yè)面,本文給大家介紹了一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-12-12vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue依賴(lài)包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴(lài)包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
在本篇文章中小編給大家分享了vue如何實(shí)現(xiàn)點(diǎn)擊隱藏與顯示的相關(guān)內(nèi)容,有需要的朋友們跟著學(xué)習(xí)下。2019-02-02VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式
這篇文章主要介紹了VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03