Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕加載效果
更新時間:2023年07月21日 11:58:40 作者:一顆不甘墜落的流星
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
- 主要使用 beforeClose 方法實現(xiàn) loading 的效果
- beforeClose MessageBox 關(guān)閉前的回調(diào),會暫停實例的關(guān)閉
function(action, instance, done) 1. action 的值為'confirm', 'cancel'或'close'。 2. instance 為 MessageBox 實例,可以通過它訪問實例上的屬性和方法。 3. done 用于關(guān)閉 MessageBox 實例。
- 具體實現(xiàn):(
this.$confirm、this.$alert、 this.$prompt實現(xiàn)方法一樣)
this.$prompt('名稱', '新建表單', {
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;
},
});實現(xiàn)前:

實現(xiàn)后:

到此這篇關(guān)于Vue給 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按鈕的加載效果的文章就介紹到這了,更多相關(guān)vue按鈕的加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實現(xiàn)當(dāng)訪問的路由不存在時跳轉(zhuǎn)到404頁面的方法詳解
在 Vue3 中,可以使用 Vue Router 實現(xiàn)跳轉(zhuǎn)到 404 頁面,即當(dāng)用戶訪問一個不存在路由時,系統(tǒng)會默認(rèn)跳轉(zhuǎn)到 404 頁面,本文給大家介紹了一個簡單的實現(xiàn)方法,需要的朋友可以參考下2023-12-12
vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問題
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
VUE+jszip如何實現(xiàn)下載多個文件導(dǎo)出為一個zip格式
這篇文章主要介紹了VUE+jszip如何實現(xiàn)下載多個文件導(dǎo)出為一個zip格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03

