ElementUI Progress 进度条中内容换行的技巧

ElementUI 是一款非常流行的前端 UI 库，在我们的实际开发中经常用到。ElementUI 的进度条组件功能强大，支持多种类型，包括直线进度条、环形进度条等。在使用 ElementUI 的进度条组件时，我们可能会遇到一些小坑，比如内容换行。本文将介绍如何解决 ElementUI Progress 进度条中内容换行的问题。

ElementUI 的进度条组件提供了一个名为 format 的属性，我们可以通过这个属性来控制进度条中的内容。format 属性是一个函数，它接收两个参数：percentage 和 status。percentage 表示进度条的进度，是一个介于 0 和 1 之间的值。status 表示进度条的状态，是一个字符串。

在默认情况下，ElementUI 的进度条组件会将 percentage 和 status 拼接起来，作为进度条中的内容。如果我们要实现内容换行，我们需要在 format 函数中手动换行。

例如，我们可以通过以下代码实现内容换行：

<template>
  <el-progress :format="formatPercentage" :percentage="percentage" />
</template>

<script>
export default {
  data() {
    return {
      percentage: 0,
    };
  },
  methods: {
    formatPercentage(percentage, status) {
      return `
        ${percentage}%
        ${status}
      `;
    },
  },
};
</script>

在上面的代码中，我们通过 formatPercentage 函数实现了内容换行。formatPercentage 函数接收两个参数：percentage 和 status。percentage 表示进度条的进度，是一个介于 0 和 1 之间的值。status 表示进度条的状态，是一个字符串。

在 formatPercentage 函数中，我们使用换行符 (\n) 将 percentage 和 status 拼接起来。这样，进度条中的内容就会换行显示。

除了使用 format 属性来实现内容换行，我们还可以通过 CSS 来实现内容换行。我们可以通过以下 CSS 代码实现内容换行：

.el-progress__text {
  white-space: pre-line;
}

在上面的 CSS 代码中，我们使用了 white-space 属性来控制进度条中的内容的换行方式。white-space 属性的值为 pre-line，表示进度条中的内容会在换行符 (\n) 处换行。

以上两种方法都可以实现 ElementUI Progress 进度条中内容换行。我们可以根据自己的实际需要选择合适的方法。