vue3 element-plus el-progress 圆形circle进度条 内置文字换行

<div>
      <el-progress style="margin-left:20px" type="circle" :width="140" :height="100"  :stroke-width="10" :backgrounColor="'#fff'" :percentage="state.cpuUse" :format="format"></el-progress>
    </div>

加上/n

const  format = (percentage) => {
    return `容器组\n\n  ${percentage} / ${state.cpuTotal} `;
  }

设置一下css换行

 ::v-deep .el-progress__text {
  white-space: pre;
}

效果图

vue3 element-plus el-progress 圆形circle进度条 内置文字换行_第1张图片

你可能感兴趣的:(vue.js,javascript,前端)