import Vue from "vue";
import { Progress } from "vant";
Vue.use(Progress);
进度条默认为蓝色,使用percentage属性来设置当前进度
<van-progress :percentage="50" />
通过stroke-width可以设置进度条的粗细
<van-progress :percentage="50" stroke-width="8" />
设置inactive属性后进度条将置灰
<van-progress inactive :percentage="50" />
可以使用pivot-text属性自定义文字,color属性自定义进度条颜色
<van-progress
pivot-text="橙色"
color="#f2826a"
:percentage="25"
/>
<van-progress
pivot-text="红色"
color="#ee0a24"
:percentage="50"
/>
<van-progress
:percentage="75"
pivot-text="紫色"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
percentage | 进度百分比 | number | string | 0 |
stroke-width v2.2.1 | 进度条粗细,默认单位为px | number | string | 4px |
color | 进度条颜色 | string | #1989fa |
track-color v2.2.9 | 轨道颜色 | string | #e5e5e5 |
pivot-text | 进度文字内容 | string | 百分比 |
pivot-color | 进度文字背景色 | string | 同进度条颜色 |
text-color | 进度文字颜色 | string | white |
inactive | 是否置灰 | boolean | false |
show-pivot | 是否显示进度文字 | boolean | true |
Descriptions 描述列表列表形式展示多个字段。基础用法templateel-descriptions title="用户信息"el-descriptions-item label="...
Image 图片图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等基础用法可通过fit确定图片如何适应到容器框...
在Bootstrap4中,提供了很好的方式来处理图片或视频等多媒体对象和内容的布局。其应用场景有博客评论、微博等等。基础多媒体对象...
象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示,它利用图片和形状表现数据,具体来说它既可以用图形的长宽变形表现...
Highcharts 圆形进度条式测量图Highcharts 测量图以下实例演示了圆形进度条式测量图。我们在前面的章节已经了解了 Highcharts 基...