ElementUi Progress 进度条的小坑
今天在开发的过程中遇到了一个element 进度条的一个小坑 特此记录下来 希望能给大家一些帮助
首先呢 需求是下面这个样子
然后我的尝试 下面是原代码
<el-progress type="circle" :percentage="75" color="#3d7ad5" stroke-linecap="butt" :stroke-width="20" :width="100" :format="format"></el-progress>复制代码
format(percentage) {
return percentage === 100 ? `${percentage}%` + '指标值' : `${percentage}%` + '\n' + '指标值'
},复制代码满心欢喜的打开了我的浏览器
这是什么!!! 为什么没有生效呢!!!
后来鼓捣了半天 各种尝试 在标签里添加一个 style=" white-space: pre;" 就可以了 解决后的代码是这样
<el-progress type="circle" :percentage="75" color="#3d7ad5" stroke-linecap="butt" :stroke-width="20" :width="100" style=" white-space: pre;" :format="format"></el-progress>复制代码
完美解决 哈哈哈
今天的分享就到这里 感谢大家的观看 对你们有用的HXD 可以点个赞嘛~~~~
作者：前端cv大法继承人
链接：https://juejin.cn/post/7018126257694965790