mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Progress: optimzie dom struct
This commit is contained in:
陈嘉涵
parent
ac4b739814
commit
5b1e27073d
@ -1,13 +1,11 @@
|
||||
<style>
|
||||
.demo-progress {
|
||||
&__wrapper {
|
||||
padding: 5px;
|
||||
.van-progress {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## Progress 进度条
|
||||
|
||||
### 使用指南
|
||||
@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
|
||||
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
|
||||
</div>
|
||||
<van-progress :percentage="0"></van-progress>
|
||||
<van-progress :percentage="46"></van-progress>
|
||||
<van-progress :percentage="100"></van-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Inactive
|
||||
#### 进度条置灰
|
||||
|
||||
是否置灰进度条，一般用于进度条被取消时。
|
||||
|
||||
:::demo Inactive
|
||||
:::demo 进度条置灰
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
|
||||
</div>
|
||||
<van-progress inactive :percentage="0"></van-progress>
|
||||
<van-progress inactive :percentage="46"></van-progress>
|
||||
<van-progress inactive :percentage="100"></van-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### 自定义颜色和文字
|
||||
#### 样式定制
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
|
||||
:::demo 自定义颜色和文字
|
||||
:::demo 样式定制
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
</div>
|
||||
<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
||||
|
||||
| inactive | 是否置灰 | `boolean` | `false` | |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
||||
|
||||
@ -1,27 +1,11 @@
|
||||
<template>
|
||||
<div class="van-progress">
|
||||
<div class="van-progress__bar">
|
||||
<span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
|
||||
<span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
|
||||
</div>
|
||||
<span class="van-progress__portion" :style="portionStyle"></span>
|
||||
<span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* van-progress
|
||||
* @module components/progress
|
||||
* @desc 开关
|
||||
* @param {boolean} [inactive=false] - 是否置灰
|
||||
* @param {number} [percentage=0] - 进度百分比
|
||||
* @param {string} [pivotText=percentage] - 进度条显示文字
|
||||
* @param {string} [color='#38f'] - 进度条颜色
|
||||
* @param {string} [textColor='#fff'] - 进度条文字颜色
|
||||
*
|
||||
* @example
|
||||
* <van-switch checked="true" disabled="false"></van-switch>
|
||||
*/
|
||||
|
||||
const DEFAULT_COLOR = '#38f';
|
||||
const DEFAULT_TEXT_COLOR = '#fff';
|
||||
const INACTIVE_COLOR = '#cacaca';
|
||||
@ -33,14 +17,12 @@ export default {
|
||||
percentage: {
|
||||
type: Number,
|
||||
required: true,
|
||||
validator(value) {
|
||||
return value <= 100 && value >= 0;
|
||||
}
|
||||
validator: value => value >= 0 && value <= 100
|
||||
},
|
||||
inactive: Boolean,
|
||||
pivotText: {
|
||||
type: String,
|
||||
default: function() {
|
||||
default() {
|
||||
return this.percentage + '%';
|
||||
}
|
||||
},
|
||||
@ -59,24 +41,19 @@ export default {
|
||||
return this.inactive ? INACTIVE_COLOR : this.color;
|
||||
},
|
||||
pivotStyle() {
|
||||
const pivotStyle = {
|
||||
backgroundColor: this.componentColor,
|
||||
const { percentage } = this;
|
||||
return {
|
||||
color: this.textColor,
|
||||
left: this.percentage + '%',
|
||||
marginLeft: '-14px'
|
||||
backgroundColor: this.componentColor,
|
||||
left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
|
||||
marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
|
||||
};
|
||||
},
|
||||
portionStyle() {
|
||||
return {
|
||||
width: this.percentage + '%',
|
||||
backgroundColor: this.componentColor
|
||||
};
|
||||
if (this.percentage <= 5) {
|
||||
pivotStyle.left = '0%';
|
||||
pivotStyle.marginLeft = '0';
|
||||
} else if (this.percentage >= 95) {
|
||||
pivotStyle.left = '100%';
|
||||
pivotStyle.marginLeft = '-28px';
|
||||
} else {
|
||||
pivotStyle.left = this.percentage + '%';
|
||||
pivotStyle.marginLeft = '-14px';
|
||||
}
|
||||
|
||||
return pivotStyle;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,32 +1,27 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-progress {
|
||||
&__bar {
|
||||
height: 4px;
|
||||
border-radius: 4.5px;
|
||||
width: 100%;
|
||||
background: $c-gray-light;
|
||||
position: relative;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
background: $c-gray-light;
|
||||
|
||||
&__finished-portion {
|
||||
border-radius: 4.5px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
&__portion {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&__pivot {
|
||||
padding: 2px 0;
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 28px;
|
||||
background-color: $c-gray-light;
|
||||
line-height: 8px;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
&__pivot {
|
||||
top: 50%;
|
||||
width: 28px;
|
||||
font-size: 8px;
|
||||
margin-top: -6px;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user