• Progress 进度条
    • 引入
  • 代码演示
    • 基础用法
    • 置灰
    • 样式定制
  • API
    • Props

    Progress 进度条

    引入

    1. import { Progress } from 'vant';
    3. Vue.use(Progress);

    代码演示

    基础用法

    进度条默认为蓝色，使用percentage属性来设置当前进度

    1. <van-progress :percentage="50" />

    置灰

    1. <van-progress inactive :percentage="50" />

    样式定制

    可以使用pivot-text属性自定义文字，color属性自定义进度条颜色

    1. <van-progress
    2.   pivot-text="橙色"
    3.   color="#f2826a"
    4.   :percentage="25"
    5. />
    7. <van-progress
    8.   pivot-text="红色"
    9.   color="#f44"
    10.   :percentage="50"
    11. />
    13. <van-progress
    14.   :percentage="75"
    15.   pivot-text="紫色"
    16.   pivot-color="#7232dd"
    17.   color="linear-gradient(to right, #be99ff, #7232dd)"
    18. />

    API

    Props

    参数说明类型默认值版本
    inactive是否置灰Booleanfalse-
    percentage进度百分比Number0-
    show-pivot是否显示进度文字Booleantrue-
    color进度条颜色String#1989fa-
    text-color进度条文字颜色String#fff-
    pivot-text文字显示String百分比文字-
    pivot-color文字背景色String与进度条颜色一致-

    Progress 进度条 - 图1