Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕加載效果
更新時間：2023年07月21日 11:58:40 作者：一顆不甘墜落的流星
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
- 主要使用 beforeClose 方法實現(xiàn) loading 的效果
- beforeClose MessageBox 關閉前的回調(diào)，會暫停實例的關閉
function(action, instance, done) 1. action 的值為'confirm', 'cancel'或'close'。 2. instance 為 MessageBox 實例，可以通過它訪問實例上的屬性和方法。 3. done 用于關閉 MessageBox 實例。
- 具體實現(xiàn)：（
this.$confirm、this.$alert、 this.$prompt實現(xiàn)方法一樣）
this.$prompt('名稱', '新建表單', {
confirmButtonText: '確定',
cancelButtonText: '取消',
beforeClose: async (action, ctx, close) => {
// 如果非確認按鈕事件，則直接關閉彈窗
if (action !== 'confirm') {
close();
return;
}
// confirmButtonLoading 是在 elementUI-message-box下的 main.vue 文件中封裝的參數(shù)
ctx.confirmButtonLoading = true;
try {
// ctx.inputValue 獲取 input 輸入框的值
await this.createApi(ctx.inputValue);
// 提交成功后關閉窗口
close();
} catch (error) {}
ctx.confirmButtonLoading = false;
},
});實現(xiàn)前：
實現(xiàn)后：
到此這篇關于Vue給 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按鈕的加載效果的文章就介紹到這了,更多相關vue按鈕的加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3?接入?i18n?實現(xiàn)國際化多語言案例分析
在?Vue.js?3?中實現(xiàn)網(wǎng)頁的國際化多語言,最常用的包是?vue-i18n,通常我們會與?vue-i18n-routing?一起使用,這篇文章主要介紹了Vue3?如何接入?i18n?實現(xiàn)國際化多語言,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了基于Vue方法實現(xiàn)簡單計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
關于vue-router路由的傳參方式params query
這篇文章主要介紹了關于vue-router路由的傳參方式params query,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁面在進行切換時,原有的路由組件會被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11
解決axios發(fā)送post請求返回400狀態(tài)碼的問題
今天小編就為大家分享一篇解決axios發(fā)送post請求返回400狀態(tài)碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue3學習之語法糖、箭頭函數(shù)、函數(shù)聲明詳解
在Vue3中箭頭函數(shù)被廣泛支持,尤其是在組合式API的上下文中,這篇文章主要給大家介紹了關于Vue3學習之語法糖、箭頭函數(shù)、函數(shù)聲明的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
vue?beforeDestroy?clearInterval清除定時器失效的解決
這篇文章主要介紹了vue?beforeDestroy?clearInterval清除定時器失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue3+vite使用svg圖片方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
vue中vxe-table表格加載數(shù)據(jù)的兩種方式詳解
這篇文章主要為大家詳細介紹了vue中vxe-table表格加載數(shù)據(jù)的兩種方式詳解,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2026-01-01
vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式
這篇文章主要介紹了vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07