blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Circle: jsx (#2499)

Browse Source
This commit is contained in:
neverland 2019-01-11 22:24:39 +08:00 committed by GitHub
parent 3bb15e026b
commit 7a19675e1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/circle/index.vue → packages/circle/index.js
View File

@ -1,41 +1,16 @@
<template> import { use } from '../utils';
<div
:class="b()"
:style="style"
>
<svg viewBox="0 0 1060 1060">
<path
:class="b('hover')"
:style="hoverStyle"
:d="path"
/>
<path
:class="b('layer')"
:style="layerStyle"
:d="path"
/>
</svg>
<slot>
<div
v-text="text"
:class="b('text')"
/>
</slot>
</div>
</template>
<script>
import create from '../utils/create';
import { raf, cancel } from '../utils/raf'; import { raf, cancel } from '../utils/raf';
import { BLUE, WHITE } from '../utils/color'; import { BLUE, WHITE } from '../utils/color';
const [sfc, bem] = use('circle');
const PERIMETER = 3140;
const PATH = 'M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0';
function format(rate) { function format(rate) {
return Math.min(Math.max(rate, 0), 100); return Math.min(Math.max(rate, 0), 100);
} }
export default create({ export default sfc({
name: 'circle',
props: { props: {
text: String, text: String,
value: Number, value: Number,
@ -70,11 +45,6 @@ export default create({
} }
}, },
beforeCreate() {
this.perimeter = 3140;
this.path = 'M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0';
},
computed: { computed: {
style() { style() {
return { return {
@ -84,8 +54,8 @@ export default create({
}, },
layerStyle() { layerStyle() {
let offset = this.perimeter * (100 - this.value) / 100; let offset = (PERIMETER * (100 - this.value)) / 100;
offset = this.clockwise ? offset : this.perimeter * 2 - offset; offset = this.clockwise ? offset : PERIMETER * 2 - offset;
return { return {
stroke: `${this.color}`, stroke: `${this.color}`,
strokeDashoffset: `${offset}px`, strokeDashoffset: `${offset}px`,
@ -109,7 +79,7 @@ export default create({
this.startRate = this.value; this.startRate = this.value;
this.endRate = format(this.rate); this.endRate = format(this.rate);
this.increase = this.endRate > this.startRate; this.increase = this.endRate > this.startRate;
this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed); this.duration = Math.abs(((this.startRate - this.endRate) * 1000) / this.speed);
if (this.speed) { if (this.speed) {
cancel(this.rafId); cancel(this.rafId);
this.rafId = raf(this.animate); this.rafId = raf(this.animate);
@ -131,6 +101,17 @@ export default create({
this.rafId = raf(this.animate); this.rafId = raf(this.animate);
} }
} }
},
render(h) {
return (
<div class={bem()} style={this.style}>
<svg viewBox="0 0 1060 1060">
<path class={bem('hover')} style={this.hoverStyle} d={PATH} />
<path class={bem('layer')} style={this.layerStyle} d={PATH} />
</svg>
{this.$slots.default || (this.text && <div class={bem('text')}>{this.text}</div>)}
</div>
);
} }
}); });
</script>