Element UI Loading 加载组件动态变更 text 值（加载文案）

2023-10-30 05:18:21

背景

在实际开发中，经常遇到需要在页面加载或执行耗时操作时为用户提供友好的等待提示。Element UI 提供了一个 Loading 加载组件，可以轻松实现这一需求。但是，有时候我们需要在 loading 过程中动态变更加载文案，例如显示上传的进度值。本文将详细介绍如何实现这一需求。

Element UI Loading 组件简介

Element UI Loading 组件是一个内置加载指示器的组件，可以轻松地添加到页面中。它提供了多种属性，可以自定义加载指示器的外观和行为。其中，text 属性可以设置加载时显示的文案。

<el-loading text="正在加载中..."></el-loading>

动态变更 text 值

在某些场景下，我们需要在 loading 过程中动态变更 text 值。例如，在上传文件时，我们可以显示上传的进度值作为加载文案。要实现这一需求，我们需要使用 Loading 组件的 update 方法。

this.$loading.update({
  text: '正在上传，已完成 ' + progress + '%...'
})

其中，progress 是上传进度值。这样，加载文案就会动态更新为上传进度值。

同时显示进度条

除了动态变更 text 值，我们还可以同时显示进度条。Element UI 提供了 el-progress 组件，可以轻松实现这一需求。

<el-loading :fullscreen="true">
  <template slot="default">
    <el-progress :percentage="progress"></el-progress>
  </template>
</el-loading>

这样，在 loading 的同时，页面上还会显示一个进度条，实时显示上传进度。

完整示例

下面是一个完整的示例，展示了如何在 Element UI Loading 加载组件中动态变更 text 值并同时显示进度条：

<template>
  <el-button @click="handleUpload">上传文件</el-button>
</template>

<script>
import { Loading } from 'element-ui'

export default {
  methods: {
    handleUpload() {
      const loading = Loading.service({
        fullscreen: true
      })
      // 模拟上传进度
      let progress = 0
      const interval = setInterval(() => {
        progress += 5
        loading.update({
          text: '正在上传，已完成 ' + progress + '%...'
        })
        if (progress === 100) {
          clearInterval(interval)
          loading.close()
        }
      }, 100)
    }
  }
}
</script>