[JavaScript知识库]vue3+elementPlus：el-progress环形进度条自定义样式和文本

在属性里有:color自定义回调的颜色函数，

:percentage代表进度条（数量），如果有后端接口这里就放接口的数据

type="circle"是环形，

template是模板，用来封装自定义的样式或者数据

在el-progress里包裹一层template

<template #default="{ percentage }"></template>

里面用来自定义进度条和文本数据

 <!-- 进度条 -->
 <p style="color: rgba(255, 105, 180, 1)">{{ percentage }}个</p>
 <!-- 文本数据 -->
 <p style="color: rgba(	70, 130, 180, 0.8)">{{ format.data }}</p>

事件层

简单demo，根据数据自定义颜色

<script lang="ts" setup>
import {reactive, onMounted, ref} from 'vue'

const format = reactive({
  data:'模拟接口数据'
})

//根据数据自定义颜色
const colors = reactive([
  { color: "rgba(123, 104, 238,0.6)", percentage: 20 },//占比为20%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 40 },//占比为40%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 60 },//占比为60%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 80 },//占比为80%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 100 },//占比为100%显示xxx色
]);
</script>

完整代码：

html层的重点：

①template模板里要放percentage

②如果有后端接口:percentage就放接口返回的数据

<template>
  <div class="demo-progress">
   <!-- 如果有后端接口:percentage就放接口返回的数据 -->
    <el-progress type="circle" :percentage="40" :color="colors">
      <!-- 模板里要放percentage -->
      <template #default="{ percentage }">
        <!-- 进度条 -->
         <p style="color: rgba(255, 105, 180, 1)">{{ percentage }}个</p>
        <!-- 文本数据 -->
         <p style="color: rgba(	70, 130, 180, 0.8)">{{ format.data }}</p>
      </template>
    </el-progress>
  </div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, ref} from 'vue'

const format = reactive({
  data:'模拟接口数据'
})


const colors = reactive([
  { color: "rgba(123, 104, 238,0.6)", percentage: 20 },//进度为20%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 40 },//进度为40%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 60 },//进度为60%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 80 },//进度为80%显示xxx色
  { color: "rgba(123, 104, 238,0.6)", percentage: 100 },//进度为100%显示xxx色
]);
</script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>

作者上一篇文章，

vue3+elementPlus：el-table表格里设置switch开关_意初的博客-CSDN博客vue3+elementPlus：el-table表格里设置switch开关。里面写v-model用来绑定字段。在开关外层用插槽包裹。用插槽包裹el-switch开关，v-model双向响应,js层，实战版本,请求后台接口版,与后台接口交互将数据传给el-table绑定的:data=>data.tableList，，注意：要数据里有changer这个字段。最后将请求函数挂载到vue视图上https://blog.csdn.net/weixin_43928112/article/details/127101774