blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Progress: jsx (#2615)

Browse Source
This commit is contained in:
neverland 2019-01-25 20:51:02 +08:00 committed by GitHub
parent 335cc46e37
commit 377635cb9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 93 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
packages/progress/index.js Normal file
View 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>
);
}
});

102
packages/progress/index.vue
View File

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

10
packages/progress/test/__snapshots__/demo.spec.js.snap
View File

@ -3,15 +3,15 @@
exports[`renders demo correctly 1`] = `
<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 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 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="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="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:#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="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="background:linear-gradient(to right, #be99ff, #7232dd);width:0px;"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span></div>
</div>
</div>
`;

4
packages/progress/test/__snapshots__/index.spec.js.snap
View File

@ -1,5 +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; 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>`;