VUE3 Ant Design中Progress实现环形进度条内文字自定义样式

可以在Progress中添加一个template，然后#format=“percent”：这定义了一个具名插槽，名为format。当使用这个具名插槽时，可以通过percent参数接收一个值，这个值与进度条的百分比相关。具体实现方式如下：

<!--  
size:进度条的尺寸可以是数字也可以是| "small" | "default"
type:类型，可选 line circle dashboard ,这里使用的圆形
percent:百分比 
showInfo:是否显示进度数值或状态图标
strokeColor: 进度条的色彩
strokeLinecap:进度条的样式,环的样式
 -->
<Progress
              type="circle"
              :strokeWidth="10"
              :size="180"
              :percent="progressPercent"
              :showInfo="true"
              :strokeColor="conicColors"
              strokeLinecap="square">
              <!--  环内文字展示！！！！ -->
              <template  #format="percent">
                <div>
                  <a-row style="text-align: left;margin-left:50px;font-weight: bold ">
                  <!--  文字设定颜色之后100%也不会改变颜色 -->
                    <a-col style="padding: 0 0 16px 0;color: #000000C4; "><span  style="font-size: 35px;margin-top: 2px">800</span><span style="font-size: 15px;margin-left: 6px; ">分</span></a-col>
                    <a-col  style="padding: 0 0 6px 0;color: #999999C5;"> <span style="font-size: 11px;">环比：900分</span></a-col>
                    <a-col  style="color: #999999C5;"> <span style="font-size: 11px;">同比：100%</span>
                      <Icon icon="ant-design:arrow-up-outlined" style="color: #00bb00"/>
                      <Icon icon="ant-design:arrow-down-outlined" style="color: #ee930e"/>
                    </a-col>
                  </a-row>
                </div>
              </template>
            </Progress>
            
<script lang="ts" name="demo" setup>  
import {reactive,onMounted, ref} from 'vue'; 
import { Icon } from '/@/components/Icon';
<!--  引入组件 -->
import SingleLine from '/@/components/chart/SingleLine.vue';
const formRef = ref();
/* *
* 进度条参数
* */
//进度条百分比
const progressPercent = ref(0);
//进度条颜色 设置100%为指定颜色，进度条到百分100就不会自动变绿色
const conicColors = ref({
  '100%': '#4B7EFE',
});
const updateProgress = () => {
  let percent = 0;
  const interval = setInterval(() => {
    percent++;
    if (percent > 100) {
      clearInterval(interval);
    }
    progressPercent.value = percent;
  }, 50);
};
onMounted(() => {
  //动态展示
  updateProgress(); 
});
</script>