mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-10-31 03:22:08 +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',
|
||||
// title: 'NoticeBar 通知栏',
|
||||
// },
|
||||
// {
|
||||
// path: 'progress',
|
||||
// title: 'Progress 进度条',
|
||||
// },
|
||||
{
|
||||
path: 'progress',
|
||||
title: 'Progress 进度条',
|
||||
},
|
||||
{
|
||||
path: 'skeleton',
|
||||
title: 'Skeleton 骨架屏',
|
||||
@ -591,10 +591,10 @@ module.exports = {
|
||||
// path: 'notice-bar',
|
||||
// title: 'NoticeBar',
|
||||
// },
|
||||
// {
|
||||
// path: 'progress',
|
||||
// title: 'Progress',
|
||||
// },
|
||||
{
|
||||
path: 'progress',
|
||||
title: 'Progress',
|
||||
},
|
||||
{
|
||||
path: 'skeleton',
|
||||
title: 'Skeleton',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user