43 lines
873 B
Vue
43 lines
873 B
Vue
import { Line, Circle } from '../index';
|
|
import '../assets/index.less';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
percent: 0,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.increase();
|
|
});
|
|
},
|
|
methods: {
|
|
increase() {
|
|
const percent = this.percent + 1;
|
|
if (percent >= 100) {
|
|
clearTimeout(this.tm);
|
|
return;
|
|
}
|
|
this.percent = percent;
|
|
this.tm = setTimeout(this.increase, 10);
|
|
},
|
|
restart() {
|
|
clearTimeout(this.tm);
|
|
this.percent = 0;
|
|
this.$nextTick(() => {
|
|
this.increase();
|
|
});
|
|
},
|
|
},
|
|
render() {
|
|
return (
|
|
<div style="margin: 10px;width: 200px">
|
|
<Circle strokeWidth="6" percent={this.percent} />
|
|
<Line strokeWidth="4" percent={this.percent} />
|
|
<button onClick={this.restart}>Restart</button>
|
|
</div>
|
|
);
|
|
},
|
|
};
|