mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: Progress component
This commit is contained in:
chenjiahan
parent
6567b041b9
commit
2539a548b6
63
src-next/progress/README.md
Normal file
63
src-next/progress/README.md
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
# Progress
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Progress } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Progress);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
Use 'percentage' prop to set current progress
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress :percentage="50" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stroke Width
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress :percentage="50" stroke-width="8" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Inactive
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress inactive :percentage="50" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Style
|
||||||
|
|
||||||
|
Use `pivot-text` to custom text，use `color` to custom bar color
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress pivot-text="Orange" color="#f2826a" :percentage="25" />
|
||||||
|
<van-progress pivot-text="Red" color="#ee0a24" :percentage="50" />
|
||||||
|
<van-progress
|
||||||
|
:percentage="75"
|
||||||
|
pivot-text="Purple"
|
||||||
|
pivot-color="#7232dd"
|
||||||
|
color="linear-gradient(to right, #be99ff, #7232dd)"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Default |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| percentage | Percentage | _number \| string_ | `0` |
|
||||||
|
| stroke-width `v2.2.1` | Stroke width | _number \| string_ | `4px` |
|
||||||
|
| color | Color | _string_ | `#1989fa` |
|
||||||
|
| track-color `v2.2.9` | Track color | _string_ | `#e5e5e5` |
|
||||||
|
| pivot-text | Pivot text | _string_ | percentage |
|
||||||
|
| pivot-color | Pivot text background color | _string_ | inherit progress color |
|
||||||
|
| text-color | Pivot text color | _string_ | `white` |
|
||||||
|
| inactive | Whether to be gray | _boolean_ | `false` |
|
||||||
|
| show-pivot | Whether to show text | _boolean_ | `true` |
|
||||||
67
src-next/progress/README.zh-CN.md
Normal file
67
src-next/progress/README.zh-CN.md
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
# Progress 进度条
|
||||||
|
|
||||||
|
### 引入
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Progress } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(Progress);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress :percentage="50" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 线条粗细
|
||||||
|
|
||||||
|
通过`stroke-width`可以设置进度条的粗细
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress :percentage="50" stroke-width="8" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 置灰
|
||||||
|
|
||||||
|
设置`inactive`属性后进度条将置灰
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress inactive :percentage="50" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 样式定制
|
||||||
|
|
||||||
|
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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)"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| 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` |
|
||||||
63
src-next/progress/demo/index.vue
Normal file
63
src-next/progress/demo/index.vue
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<demo-section>
|
||||||
|
<demo-block :title="t('basicUsage')">
|
||||||
|
<van-progress :percentage="50" />
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block v-if="!isWeapp" :title="t('strokeWidth')">
|
||||||
|
<van-progress :percentage="50" stroke-width="8" />
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block :title="t('title2')">
|
||||||
|
<van-progress inactive :percentage="50" />
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block :title="t('title3')">
|
||||||
|
<van-progress
|
||||||
|
color="#f2826a"
|
||||||
|
:percentage="25"
|
||||||
|
:pivot-text="t('orange')"
|
||||||
|
/>
|
||||||
|
<van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
|
||||||
|
<van-progress
|
||||||
|
:percentage="75"
|
||||||
|
:pivot-text="t('purple')"
|
||||||
|
pivot-color="#7232dd"
|
||||||
|
color="linear-gradient(to right, #be99ff, #7232dd)"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
</demo-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
i18n: {
|
||||||
|
'zh-CN': {
|
||||||
|
title2: '置灰',
|
||||||
|
title3: '样式定制',
|
||||||
|
strokeWidth: '线条粗细',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
title2: 'Inactive',
|
||||||
|
title3: 'Custom Style',
|
||||||
|
strokeWidth: 'Stroke Width',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '../../style/var';
|
||||||
|
|
||||||
|
.demo-progress {
|
||||||
|
background: @white;
|
||||||
|
|
||||||
|
.van-progress {
|
||||||
|
margin: 20px;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
84
src-next/progress/index.js
Normal file
84
src-next/progress/index.js
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import { createNamespace, isDef, addUnit } from '../utils';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('progress');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
inactive: Boolean,
|
||||||
|
pivotText: String,
|
||||||
|
textColor: String,
|
||||||
|
pivotColor: String,
|
||||||
|
trackColor: String,
|
||||||
|
strokeWidth: [Number, String],
|
||||||
|
percentage: {
|
||||||
|
type: [Number, String],
|
||||||
|
required: true,
|
||||||
|
validator: (value) => value >= 0 && value <= 100,
|
||||||
|
},
|
||||||
|
showPivot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pivotWidth: 0,
|
||||||
|
progressWidth: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.setWidth();
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
showPivot: 'setWidth',
|
||||||
|
pivotText: 'setWidth',
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
setWidth() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.progressWidth = this.$el.offsetWidth;
|
||||||
|
this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { pivotText, percentage } = this;
|
||||||
|
const text = isDef(pivotText) ? pivotText : percentage + '%';
|
||||||
|
const showPivot = this.showPivot && text;
|
||||||
|
const background = this.inactive ? '#cacaca' : this.color;
|
||||||
|
|
||||||
|
const pivotStyle = {
|
||||||
|
color: this.textColor,
|
||||||
|
left: `${((this.progressWidth - this.pivotWidth) * percentage) / 100}px`,
|
||||||
|
background: this.pivotColor || background,
|
||||||
|
};
|
||||||
|
|
||||||
|
const portionStyle = {
|
||||||
|
background,
|
||||||
|
width: (this.progressWidth * percentage) / 100 + 'px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const wrapperStyle = {
|
||||||
|
background: this.trackColor,
|
||||||
|
height: addUnit(this.strokeWidth),
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={bem()} style={wrapperStyle}>
|
||||||
|
<span class={bem('portion')} style={portionStyle}>
|
||||||
|
{showPivot && (
|
||||||
|
<span ref="pivot" style={pivotStyle} class={bem('pivot')}>
|
||||||
|
{text}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
32
src-next/progress/index.less
Normal file
32
src-next/progress/index.less
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
@import '../style/var';
|
||||||
|
|
||||||
|
.van-progress {
|
||||||
|
position: relative;
|
||||||
|
height: @progress-height;
|
||||||
|
background: @progress-background-color;
|
||||||
|
border-radius: @progress-height;
|
||||||
|
|
||||||
|
&__portion {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: @progress-color;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pivot {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 3.6em;
|
||||||
|
padding: @progress-pivot-padding;
|
||||||
|
color: @progress-pivot-text-color;
|
||||||
|
font-size: @progress-pivot-font-size;
|
||||||
|
line-height: @progress-pivot-line-height;
|
||||||
|
text-align: center;
|
||||||
|
word-break: keep-all;
|
||||||
|
background-color: @progress-pivot-background-color;
|
||||||
|
border-radius: 1em;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src-next/progress/test/__snapshots__/demo.spec.js.snap
Normal file
20
src-next/progress/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders demo correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-progress" style="height: 8px;"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(202, 202, 202);">50%</span></span></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(242, 130, 106);">橙色</span></span></div>
|
||||||
|
<div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(238, 10, 36);">红色</span></span></div>
|
||||||
|
<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(114, 50, 221);">紫色</span></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
5
src-next/progress/test/__snapshots__/index.spec.js.snap
Normal file
5
src-next/progress/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"></span></div>`;
|
||||||
|
|
||||||
|
exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">test</span></span></div>`;
|
||||||
4
src-next/progress/test/demo.spec.js
Normal file
4
src-next/progress/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Demo from '../demo';
|
||||||
|
import { snapshotDemo } from '../../../test/demo';
|
||||||
|
|
||||||
|
snapshotDemo(Demo);
|
||||||
28
src-next/progress/test/index.spec.js
Normal file
28
src-next/progress/test/index.spec.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import Progress from '..';
|
||||||
|
import { mount, later } from '../../../test';
|
||||||
|
|
||||||
|
test('calc width', async () => {
|
||||||
|
const wrapper = mount(Progress, {
|
||||||
|
propsData: {
|
||||||
|
showPivot: false,
|
||||||
|
percentage: 100,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await later();
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
|
||||||
|
wrapper.vm.showPivot = true;
|
||||||
|
wrapper.vm.pivotText = 'test';
|
||||||
|
await later();
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('track color prop', async () => {
|
||||||
|
const wrapper = mount(Progress, {
|
||||||
|
propsData: {
|
||||||
|
trackColor: 'green',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.element.style.background).toEqual('green');
|
||||||
|
});
|
||||||
@ -257,10 +257,10 @@ module.exports = {
|
|||||||
// path: 'notice-bar',
|
// path: 'notice-bar',
|
||||||
// title: 'NoticeBar 通知栏',
|
// title: 'NoticeBar 通知栏',
|
||||||
// },
|
// },
|
||||||
// {
|
{
|
||||||
// path: 'progress',
|
path: 'progress',
|
||||||
// title: 'Progress 进度条',
|
title: 'Progress 进度条',
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
path: 'skeleton',
|
path: 'skeleton',
|
||||||
title: 'Skeleton 骨架屏',
|
title: 'Skeleton 骨架屏',
|
||||||
@ -591,10 +591,10 @@ module.exports = {
|
|||||||
// path: 'notice-bar',
|
// path: 'notice-bar',
|
||||||
// title: 'NoticeBar',
|
// title: 'NoticeBar',
|
||||||
// },
|
// },
|
||||||
// {
|
{
|
||||||
// path: 'progress',
|
path: 'progress',
|
||||||
// title: 'Progress',
|
title: 'Progress',
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
path: 'skeleton',
|
path: 'skeleton',
|
||||||
title: 'Skeleton',
|
title: 'Skeleton',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user