Today, in the process of development, I encountered a small pit in the Element progress bar. I hereby record this and hope to give you some help

So the first thing is the demand looks like this

Then I tried and here’s the original code

<el-progress type="circle" :percentage="75" color="#3d7ad5" stroke-linecap="butt" :stroke-width="20"
                    :width="100"  :format="format"></el-progress>
Copy the code
format(percentage) { return percentage === 100 ? ` ${percentage with} % ` + 'respect' : ` ${percentage with} % ` + '\ n' + 'respect'},Copy the code

Full of joy, I opened my browser

What is this!! Why didn’t it work!!

Style =” white-space: pre; And that’s it. So here’s the code

<el-progress type="circle" :percentage="75" color="#3d7ad5" stroke-linecap="butt" :stroke-width="20"
                    :width="100" style=" white-space: pre;" :format="format"></el-progress>
Copy the code

Perfect solution hahaha

Thank you for watching the HXD useful to you, please click a like ~~~~