element

2023-03-21 16:51| 来源: 网络整理| 查看: 265

prograss.jpg

1.圆形进度条底色修改，非底色修改官方文档中有说明。deep:样式穿透,下面是3.0写法

:v-deep(.el-progress-circle__track ){ stroke: #EEEEEE; }

2.圆角修改 stroke-linecap="square" ,stroke-linecp有三个值，分别为butt/round/square，默认值为round圆角模式

3.进度条中文字修改，有两种模式，如不需要添加复杂样式，可使用format属性自行添加样式例：

methods: { format(percentage) { let tex = '2012MB' return percentage + '%\n' + tex }, } :v-deep(.el-progress__text ) { white-space: pre;//使百分号与所添加文字换行 }

4.如果需要给文字添加不同样式，需自定义文本内容例：样式使用的less，可自行转换

80% 2012MB .circleBox { position: relative; text-align: center; width: 200px; margin: 40px 0; .circleCenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); div { font-size: 26px; color: #1360FB; font-weight: 600; margin-bottom: 5px; } span { font-size: 14px; color: #999999; } } }

【本文地址】

element

element

今日新闻

推荐新闻