首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的项目中，可以像这样使用 Progress 组件：
<template>
<div>
<!-- 使用 vant-progress 组件 -->
<van-progress
:percentage="percentage"
:stroke-width="8"
:color="progressColor"
:text="showText ? '加载中...' : ''"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { Progress } from 'vant';
export default {
components: {
[Progress.name]: Progress,
},
setup() {
// 使用 ref 创建一个响应式变量，用于设置进度条的百分比
const percentage = ref(50);
// 使用 ref 创建一个响应式变量，用于设置进度条的颜色
const progressColor = ref('#1989fa');
// 使用 ref 创建一个响应式变量，用于设置是否显示加载中的文本
const showText = ref(true);
return {
percentage,
progressColor,
showText,
};
},
};
</script>
在这个例子中，我们使用了 van-progress 组件，通过 :percentage 属性设置进度条的百分比，通过 :stroke-width 属性设置进度条的宽度，通过 :color 属性设置进度条的颜色，通过 :text 属性设置是否显示加载中的文本。
你可以根据实际需求调整进度条的配置项、样式以及文本显示方式。
转载请注明出处：http://www.zyzy.cn/article/detail/5839/Vant