首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 Circle 组件：
<template>
<div>
<!-- 使用 vant-circle 组件 -->
<van-circle
:rate="progressRate"
:text="progressText"
:stroke-width="12"
:color="progressColor"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { Circle } from 'vant';
export default {
components: {
[Circle.name]: Circle,
},
setup() {
// 使用 ref 创建响应式变量，用于设置环形进度条的百分比
const progressRate = ref(60);
// 使用 ref 创建响应式变量，用于设置环形进度条的文本内容
const progressText = ref('60%');
// 使用 ref 创建响应式变量，用于设置环形进度条的颜色
const progressColor = ref('#1989fa');
return {
progressRate,
progressText,
progressColor,
};
},
};
</script>
在这个例子中，我们使用了 van-circle 组件，通过 :rate 属性设置环形进度条的百分比，通过 :text 属性设置环形进度条中显示的文本内容，通过 :stroke-width 属性设置环形进度条的宽度，通过 :color 属性设置环形进度条的颜色。
当 progressRate 的值发生变化时，环形进度条的百分比会相应更新。你可以根据具体的需求调整环形进度条的样式和显示效果。
转载请注明出处：http://www.zyzy.cn/article/detail/5829/Vant