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: pivot shouldn't cross border (#1135)

Browse Source
This commit is contained in:
neverland 2018-05-22 20:13:19 +08:00 committed by GitHub
parent 88b142a048
commit 7f10d99d3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/progress/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="b()"> <div :class="b()">
<span :class="b('portion')" :style="portionStyle"> <span :class="b('portion', { 'with-pivot': showPivot })" :style="portionStyle">
<span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span> <span v-if="showPivot" ref="pivot" :style="pivotStyle" :class="b('pivot')">{{ pivotText }}</span>
</span> </span>
</div> </div>
</template> </template>
@ -40,24 +40,52 @@ export default create({
} }
}, },
data() {
return {
pivotWidth: 0,
progressWidth: 0
};
},
computed: { computed: {
componentColor() { currentColor() {
return this.inactive ? '#cacaca' : this.color; return this.inactive ? '#cacaca' : this.color;
}, },
pivotStyle() { pivotStyle() {
return { return {
color: this.textColor, color: this.textColor,
background: this.pivotColor || this.componentColor background: this.pivotColor || this.currentColor
}; };
}, },
portionStyle() { portionStyle() {
return { return {
width: this.percentage + '%', width: (this.progressWidth - this.pivotWidth) * this.percentage / 100 + 'px',
background: this.componentColor 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> </script>

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

@ -3,19 +3,19 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span> <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
</div> </div>
</div> </div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span> <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>
</div> </div>
<div> <div>
<div class="van-progress"><span class="van-progress__portion" style="width:25%;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span> <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>
<div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#f3594b;"><span class="van-progress__pivot" style="color:#fff;background:#f3594b;">红色</span></span> <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f3594b;"><span class="van-progress__pivot" style="color:#fff;background:#f3594b;">红色</span></span>
</div> </div>
<div class="van-progress"><span class="van-progress__portion" style="width:75%;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span> <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>
</div> </div>
</div> </div>

8
packages/progress/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,8 @@
// 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(51, 136, 255);"><!----></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(51, 136, 255);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(51, 136, 255);">test</span></span>
</div>
`;

16
packages/progress/test/index.spec.js Normal file
View File

@ -0,0 +1,16 @@
import Progress from '../';
import { mount } from '@vue/test-utils';
test('calc width', () => {
const wrapper = mount(Progress, {
propsData: {
showPivot: false,
percentage: 100
}
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.vm.showPivot = true;
wrapper.vm.pivotText = 'test';
expect(wrapper.html()).toMatchSnapshot();
});

7
packages/vant-css/src/progress.css
View File

@ -11,6 +11,11 @@
height: 100%; height: 100%;
position: absolute; position: absolute;
border-radius: inherit; border-radius: inherit;
&--with-pivot {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
} }
&__pivot { &__pivot {
@ -26,6 +31,6 @@
word-break: keep-all; word-break: keep-all;
box-sizing: border-box; box-sizing: border-box;
background-color: $gray-light; background-color: $gray-light;
transform: translate(50%, -50%); transform: translate(100%, -50%);
} }
} }