Progress: optimzie dom struct

This commit is contained in:
陈嘉涵
2017-08-24 15:07:00 +08:00
parent ac4b739814
commit 5b1e27073d
3 changed files with 55 additions and 106 deletions

View File

@@ -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;
}
}
};