<template>
<div>
<!-- 使用 van-progress 组件 -->
<van-progress :percentage="percentage" />
<!-- 按钮用于更新进度 -->
<van-button @click="updateProgress">更新进度</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 百分比，用于表示进度
const percentage = ref(30);
// 更新进度的方法
const updateProgress = () => {
// 模拟更新进度
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 0;
}
};
return {
percentage,
updateProgress,
};
},
};
</script>
<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>
在上述代码中，我们使用了 van-progress 组件，并通过 :percentage 属性设置进度的百分比。通过点击按钮调用 updateProgress 方法，模拟更新进度的操作。
你可以根据实际需求自定义进度条的样式，例如设置不同的颜色、高度等。确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。
转载请注明出处：http://www.zyzy.cn/article/detail/5755/Vant