首先，确保你的项目中已经安装了 Vant。如果没有安装，可以使用以下命令：
npm install vant
然后，在你的 Vue 组件中引入 Vant Progress 组件：
<template>
<div>
<van-progress :percentage="progress" />
<button @click="startProgress">开始进度</button>
</div>
</template>
<script>
import { Progress } from 'vant';
export default {
components: {
[Progress.name]: Progress,
},
data() {
return {
progress: 0,
};
},
methods: {
startProgress() {
// 模拟进度增加的过程
const timer = setInterval(() => {
this.progress += 5;
if (this.progress >= 100) {
clearInterval(timer);
}
}, 500);
},
},
};
</script>
在上面的例子中，我们引入了 Vant 的 Progress 组件，并在模板中使用了 van-progress 标签。通过 :percentage 属性设置进度的百分比，然后在方法 startProgress 中模拟进度的增加过程。
你可以根据需要配置 Progress 组件的其他属性，例如设置进度条颜色、是否显示进度文字等。具体的配置选项可以参考 Vant 官方文档。
确保在项目中引入了 Vant 的样式文件，以确保样式正确显示。
转载请注明出处：http://www.zyzy.cn/article/detail/5687/Vant