Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕加載效果
更新時(shí)間：2023年07月21日 11:58:40 作者：一顆不甘墜落的流星
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
- 主要使用 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('名稱', '新建表單', {
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-12
這篇文章主要介紹了Antd的table組件表格的序號(hào)自增操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇vue遍歷生成的輸入框 綁定及修改值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue依賴包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報(bào)錯(cuò)問(wèn)題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
在本篇文章中小編給大家分享了vue如何實(shí)現(xiàn)點(diǎn)擊隱藏與顯示的相關(guān)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了Vue組件的繼承用法,本文通過(guò)實(shí)例代碼案例講解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
函數(shù)式組件就是沒(méi)有管理任何狀態(tài),也沒(méi)有監(jiān)聽任何傳遞給它的狀態(tài),也沒(méi)有生命周期方法,它只是一個(gè)接受一些 prop 的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局函數(shù)式組件方法的相關(guān)資料,需要的朋友可以參考下2023-06-06
VUE+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