mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 18:54:24 +00:00
Progress: optimzie dom struct
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
Reference in New Issue
Block a user