mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Progress: jsx (#2615)
This commit is contained in:
neverland
GitHub
parent
335cc46e37
commit
377635cb9a
86
packages/progress/index.js
Normal file
86
packages/progress/index.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import { use, isDef } from '../utils';
|
||||||
|
import { BLUE, WHITE } from '../utils/color';
|
||||||
|
|
||||||
|
const [sfc, bem] = use('progress');
|
||||||
|
|
||||||
|
export default sfc({
|
||||||
|
props: {
|
||||||
|
inactive: Boolean,
|
||||||
|
pivotText: String,
|
||||||
|
pivotColor: String,
|
||||||
|
percentage: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
validator: value => value >= 0 && value <= 100
|
||||||
|
},
|
||||||
|
showPivot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: BLUE
|
||||||
|
},
|
||||||
|
textColor: {
|
||||||
|
type: String,
|
||||||
|
default: WHITE
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pivotWidth: 0,
|
||||||
|
progressWidth: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getWidth();
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
showPivot() {
|
||||||
|
this.getWidth();
|
||||||
|
},
|
||||||
|
|
||||||
|
pivotText() {
|
||||||
|
this.getWidth();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getWidth() {
|
||||||
|
this.progressWidth = this.$el.offsetWidth;
|
||||||
|
this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render(h) {
|
||||||
|
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,
|
||||||
|
background: this.pivotColor || background
|
||||||
|
};
|
||||||
|
|
||||||
|
const portionStyle = {
|
||||||
|
background,
|
||||||
|
width: ((this.progressWidth - this.pivotWidth) * percentage) / 100 + 'px'
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={bem()}>
|
||||||
|
<span class={bem('portion', { 'with-pivot': showPivot })} style={portionStyle}>
|
||||||
|
{showPivot && (
|
||||||
|
<span ref="pivot" style={pivotStyle} class={bem('pivot')}>
|
||||||
|
{text}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :class="b()">
|
|
||||||
<span
|
|
||||||
:class="b('portion', { 'with-pivot': showPivot && text })"
|
|
||||||
:style="portionStyle"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="showPivot && text"
|
|
||||||
v-text="text"
|
|
||||||
ref="pivot"
|
|
||||||
:style="pivotStyle"
|
|
||||||
:class="b('pivot')"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import create from '../utils/create';
|
|
||||||
import { BLUE, WHITE } from '../utils/color';
|
|
||||||
|
|
||||||
export default create({
|
|
||||||
name: 'progress',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
inactive: Boolean,
|
|
||||||
pivotText: String,
|
|
||||||
pivotColor: String,
|
|
||||||
percentage: {
|
|
||||||
type: Number,
|
|
||||||
required: true,
|
|
||||||
validator: value => value >= 0 && value <= 100
|
|
||||||
},
|
|
||||||
showPivot: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: BLUE
|
|
||||||
},
|
|
||||||
textColor: {
|
|
||||||
type: String,
|
|
||||||
default: WHITE
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pivotWidth: 0,
|
|
||||||
progressWidth: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
text() {
|
|
||||||
return this.isDef(this.pivotText)
|
|
||||||
? this.pivotText
|
|
||||||
: this.percentage + '%';
|
|
||||||
},
|
|
||||||
|
|
||||||
currentColor() {
|
|
||||||
return this.inactive ? '#cacaca' : this.color;
|
|
||||||
},
|
|
||||||
|
|
||||||
pivotStyle() {
|
|
||||||
return {
|
|
||||||
color: this.textColor,
|
|
||||||
background: this.pivotColor || this.currentColor
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
portionStyle() {
|
|
||||||
return {
|
|
||||||
width: (this.progressWidth - this.pivotWidth) * this.percentage / 100 + 'px',
|
|
||||||
background: this.currentColor
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.getWidth();
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
showPivot() {
|
|
||||||
this.getWidth();
|
|
||||||
},
|
|
||||||
|
|
||||||
pivotText() {
|
|
||||||
this.getWidth();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
getWidth() {
|
|
||||||
this.progressWidth = this.$el.offsetWidth;
|
|
||||||
this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -3,15 +3,15 @@
|
|||||||
exports[`renders demo correctly 1`] = `
|
exports[`renders demo correctly 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span></div>
|
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#1989fa;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span></div>
|
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#cacaca;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span></div>
|
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#f2826a;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span></div>
|
||||||
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f44;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">红色</span></span></div>
|
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:#f44;width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">红色</span></span></div>
|
||||||
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span></div>
|
<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background:linear-gradient(to right, #be99ff, #7232dd);width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(25, 137, 250);"><!----></span></div>`;
|
exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"></span></div>`;
|
||||||
|
|
||||||
exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`;
|
exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user