ant-design-vue/components/vc-progress/demo/fast-progress.jsx

43 lines
873 B
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import { Line, Circle } from '../index';
import '../assets/index.less';
2018-04-03 03:00:05 +00:00
export default {
2019-01-12 03:33:27 +00:00
data() {
2018-04-03 03:00:05 +00:00
return {
percent: 0,
2019-01-12 03:33:27 +00:00
};
2018-04-03 03:00:05 +00:00
},
2019-01-12 03:33:27 +00:00
mounted() {
2018-04-03 03:00:05 +00:00
this.$nextTick(() => {
2019-01-12 03:33:27 +00:00
this.increase();
});
2018-04-03 03:00:05 +00:00
},
methods: {
2019-01-12 03:33:27 +00:00
increase() {
const percent = this.percent + 1;
2018-04-03 03:00:05 +00:00
if (percent >= 100) {
2019-01-12 03:33:27 +00:00
clearTimeout(this.tm);
return;
2018-04-03 03:00:05 +00:00
}
2019-01-12 03:33:27 +00:00
this.percent = percent;
this.tm = setTimeout(this.increase, 10);
2018-04-03 03:00:05 +00:00
},
2019-01-12 03:33:27 +00:00
restart() {
clearTimeout(this.tm);
this.percent = 0;
2018-04-03 03:00:05 +00:00
this.$nextTick(() => {
2019-01-12 03:33:27 +00:00
this.increase();
});
2018-04-03 03:00:05 +00:00
},
},
2019-01-12 03:33:27 +00:00
render() {
2018-04-03 03:00:05 +00:00
return (
2019-01-12 03:33:27 +00:00
<div style="margin: 10px;width: 200px">
<Circle strokeWidth="6" percent={this.percent} />
<Line strokeWidth="4" percent={this.percent} />
2018-04-03 03:00:05 +00:00
<button onClick={this.restart}>Restart</button>
</div>
2019-01-12 03:33:27 +00:00
);
2018-04-03 03:00:05 +00:00
},
2019-01-12 03:33:27 +00:00
};