<template>
<div>
<!-- 使用 van-circle 组件，并通过 percentage 属性设置进度百分比 -->
<van-circle
:percentage="progressPercentage"
:stroke-width="10"
:clockwise="false"
:layer-color="['#e5e5e5', '#188eee']"
/>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 进度百分比，可以根据需要动态改变
const progressPercentage = ref(50);
return {
progressPercentage,
};
},
};
</script>
<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>
在上述代码中，我们使用了 van-circle 组件，并通过 :percentage 属性设置了进度百分比。你可以通过改变 progressPercentage 的值来动态更新进度。
此外，还可以通过 :stroke-width 属性设置环形的宽度，通过 :clockwise 属性设置进度条的方向，以及通过 :layer-color 属性设置环形的颜色。在这个例子中，我们设置了两层颜色，分别为灰色和蓝色，用于表示环形的底色和进度条的颜色。
确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。
转载请注明出处：http://www.zyzy.cn/article/detail/5745/Vant