vue3+elementUI如何動(dòng)態(tài)修改Loading中提示文字
問(wèn)題
使用elementUI加載組件loading時(shí) 需要將循環(huán)中的值動(dòng)態(tài)展示在加載遮罩層上，發(fā)現(xiàn)了element-loading-text屬性可以自定義提示文字，于是寫(xiě)出如下代碼
<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中似乎無(wú)法檢測(cè)到，看了網(wǎng)上幾篇文章似乎寫(xiě)的不是很詳細(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)文章
使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個(gè)使用JavaScript和HTML5生成報(bào)表的平臺(tái)。它擁有所有擁來(lái)設(shè)計(jì)，編輯和查看報(bào)表的必需組件。該報(bào)表工具根據(jù)開(kāi)發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來(lái)通過(guò)本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
關(guān)于Vue3中element-plus的el-dialog對(duì)話框無(wú)法顯示的問(wèn)題及解決方法
最近今天在寫(xiě)一個(gè)停車(chē)場(chǎng)管理系統(tǒng)的項(xiàng)目時(shí),在用vue3寫(xiě)前端時(shí),在前端模板選擇上,我一時(shí)腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯(cuò)誤連連,下面給大家分享dialog對(duì)話框無(wú)法顯示的原因,感興趣的朋友一起看看吧2023-10-10
在 Vue 開(kāi)發(fā)中,組件通信是構(gòu)建復(fù)雜應(yīng)用的基礎(chǔ),本文將對(duì)比 Vue 2 與 Vue 3,帶你梳理最常用的 5 種通信方案,有需要的小伙伴可以根據(jù)需要進(jìn)行選擇2026-02-02
vscode中eslint插件的配置（prettier配置無(wú)效）
這篇文章主要介紹了vscode中eslint插件的配置（prettier配置無(wú)效），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue自定義全局Toast和Loading的實(shí)例詳解
這篇文章主要介紹了Vue自定義全局Toast和Loading,需要的朋友可以參考下2019-04-04
vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法
這篇文章主要介紹了vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，,需要的朋友可以參考下2017-02-02
vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家介紹了axios接口管理優(yōu)化操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
解決vue項(xiàng)目input輸入框雙向綁定數(shù)據(jù)不實(shí)時(shí)生效問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目input輸入框雙向綁定數(shù)據(jù)不實(shí)時(shí)生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08