elment Loading 加载组件动态变更 text 值bug记录

先上效果图:

倒计时4分钟组件方法

javascript 复制代码
        // 倒计时 4分钟
        getSencond() {
            this.countDown = '4分00秒'
            this.interval = setInterval(() => {
                this.maxTime--;
                let minutes = Math.floor(this.maxTime / 60);
                let seconds = Math.floor(this.maxTime % 60);
                minutes = minutes < 10 ? '0' + minutes : minutes
                seconds = seconds < 10 ? '0' + seconds : seconds
                this.countDown = minutes + '分' + seconds + '秒'
                // console.log('countDown:', this.countDown)
                this.allLoading(this.maxTime, this.countDown,)
                if (this.maxTime === 0) {
                    clearInterval(this.interval)
                }
            }, 1000)
        },

调用的loading方法

错误的写法:(text 里面给变量,变量值不会更新,只会走一次。)

javascript 复制代码
        allLoading(maxTime, countDown) {
            const loading = this.$loading({
                lock: true,
                text: `请耐心等待导入成功: 倒计时${ countDown }`,
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            if (maxTime === 0) {
                loading.close()
            }
        },

正确的写法: 官方文档里也没有提供能动态改变加载文案的 API,网上看到有人说可以使用 setText 来设置 text 值,于是使用以下方法试了试,还真的可以。

javascript 复制代码
loading.setText(`请耐心等待导入成功: 倒计时${ countDown }`)
javascript 复制代码
        data() {
            return {
                countDown: '4分00秒',
                maxTime: 4 * 60,
                interval: '',
            }
         },


         allLoading(maxTime, countDown) {
            const loading = this.$loading({
                lock: true,
                text: '正在导入...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            loading.setText(`请耐心等待导入成功: 倒计时${ countDown }`)
            if (maxTime === 0) {
                loading.close()
            }
        },

改变icon 的图标大小:

element中自带的loading图标修改大小

.el-loading-spinner{

font-size: 30px;

}

这样就可以直接修改,又得生效不了,前面可以加 ::v-deep

::v-deep .el-loading-spinner{

font-size: 30px;

}

相关推荐
海天胜景43 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
喜欢敲代码的程序员18 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w90892585919 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
hackchen1 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦1 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 天前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景1 天前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
满楼、11 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
海天胜景11 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui
资深柠檬精11 天前
报错 @import “~element-ui/packages/theme-chalk/src/index“;
前端·elementui