Element-UI Loading组件加载文本换行设置问题求助

问题原因分析 #

1. setText方法仅支持设置纯文本内容，传入的<br>会被当作普通字符串显示，无法解析为换行标签。
2. 你调用replace(/\n/g, "<br>")时未重新赋值给uploadProgressText——replace返回新字符串，不会修改原变量。
3. 若组件样式使用了scoped，你的CSS选择器会被作用域限制，无法穿透到Loading组件的内部元素。

方案一：使用\n换行符+CSS样式 #

通过保留文本中的换行符，让CSS识别并实现换行：

1. 修正JavaScript代码 #

移除<br>和无效的replace操作，只用\n构建文本：

updateProgressText() {
  // 构建带换行符的进度文本
  this.uploadProgressText = `${this.numOfFilesSuccesfullyProcessed} / ${this.numOfFiles} files uploaded\n`;

  // 添加单个文件进度详情
  for (const [file, progress] of Object.entries(this.fileProgress)) {
    this.uploadProgressText += `${file}: ${progress}%\n`;
  }

  // 更新Loading文本
  if (this.fullScreenMask) {
    this.fullScreenMask.setText(this.uploadProgressText);
  }
}

2. 修正CSS样式 #

如果Vue组件使用了scoped，需要用::v-deep穿透作用域确保样式生效：

::v-deep .upload-progress-mask .el-loading-text {
  white-space: pre-wrap; /* 保留空格和换行符，自动换行 */
  /* 也可使用 white-space: pre-line; 合并连续空格但保留换行 */
}

未使用scoped时直接写：

.upload-progress-mask .el-loading-text {
  white-space: pre-wrap;
}

方案二：直接操作DOM设置HTML内容 #

绕过setText方法，直接修改Loading组件的DOM元素，让<br>标签被解析：

修正JavaScript代码 #

用<br>构建文本，然后通过DOM操作设置innerHTML：

updateProgressText() {
  // 构建带<br>标签的进度文本
  this.uploadProgressText = `${this.numOfFilesSuccesfullyProcessed} / ${this.numOfFiles} files uploaded<br>`;

  // 添加单个文件进度详情
  for (const [file, progress] of Object.entries(this.fileProgress)) {
    this.uploadProgressText += `${file}: ${progress}%<br>`;
  }

  // 直接修改Loading文本的DOM内容
  if (this.fullScreenMask) {
    const textElement = this.fullScreenMask.$el.querySelector('.el-loading-text');
    if (textElement) {
      textElement.innerHTML = this.uploadProgressText;
    }
  }
}

这种方式无需额外CSS，直接通过HTML标签实现换行。

内容的提问来源于stack exchange，提问作者Varsh