vue3+elementUI如何動(dòng)態(tài)修改Loading中提示文字

更新時(shí)間：2025年05月31日 18:47:32 作者：weixin_45658815

這篇文章主要介紹了vue3+elementUI如何動(dòng)態(tài)修改Loading中提示文字的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問題

使用elementUI加載組件loading時(shí) 需要將循環(huán)中的值動(dòng)態(tài)展示在加載遮罩層上，發(fā)現(xiàn)了element-loading-text屬性可以自定義提示文字，于是寫出如下代碼

<div class="mycontainer" v-loading.fullscreen="download"  :element-loading-text="loadingText">

結(jié)果發(fā)現(xiàn)loadingText的值并不會(huì)動(dòng)態(tài)變化，但是處于{{loadingText}}中的值卻是一直在變化的，可是element-loading-text中似乎無法檢測(cè)到，看了網(wǎng)上幾篇文章似乎寫的不是很詳細(xì)，第一次用看得有點(diǎn)懵懵的，解決之后在此記錄一下

解決方案

<template>
	<div class="mycontainer" >
</template>

import {ElLoading} from "element-plus";
function setLoading(){
	let loading = ElLoading.service({fullscreen: true, text: '文件準(zhǔn)備中：'});//定義loading
	for (let i = 1; i < (query.total / query.pageSize) + 1; i++) {
		loading.setText(`文件準(zhǔn)備中：${i} /${query.total / query.pageSize}`)//動(dòng)態(tài)修改loading
		}
		loading.close()//關(guān)閉遮罩層
}

最終效果

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用assign巧妙重置data數(shù)據(jù)方式
這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue引用外部JS的兩種種方法
這篇文章主要介紹了vue引用外部JS的兩種種方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
Vue.js 加入高德地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue.js 加入高德地圖的實(shí)現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
vue input輸入框模糊查詢的示例代碼
本篇文章主要介紹了vue input輸入框模糊查詢的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
elementui下image組件的使用
本文主要介紹了elementui下image組件的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
詳解如何在Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何在你的Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫，文中的示例代碼簡潔易懂，具有一定的參考價(jià)值，感興趣的小伙伴可以了解一下
2023-06-06
vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖
因?yàn)楣ぷ髦幸玫礁侍貓D,所以我在網(wǎng)上搜索可以用的甘特圖,搜索了好多,但是網(wǎng)上搜到大多數(shù)都很雞肋,不能直接使用,下面這篇文章主要給大家介紹了關(guān)于vue2結(jié)合element-ui的gantt圖實(shí)現(xiàn)可拖拽甘特圖的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue打印的對(duì)象在瀏覽器中顯示的問題分析
因?yàn)樵趘ue中對(duì)象都是用了代理重寫了get,由于get重寫也就導(dǎo)致了瀏覽器不能直接獲取到具體的值,因此才會(huì)在打印的時(shí)候?yàn)?..,手動(dòng)點(diǎn)擊展開才顯示具體的值，這篇文章主要介紹了為什么vue打印的對(duì)象在瀏覽器中顯示,需要的朋友可以參考下
2024-04-04
使用vue-router為每個(gè)路由配置各自的title
這篇文章主要介紹了如何使用vue-router為每個(gè)路由配置各自的title,及使用vue router的方法，需要的朋友可以參考下
2018-07-07
vue3中組件事件和defineEmits示例代碼
這篇文章主要給大家介紹了關(guān)于vue3中組件事件和defineEmits的相關(guān)資料,組件事件是Vue組件之間進(jìn)行通信的一種方式,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10