forked from opentiny/tiny-vue
75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="content">
|
|
<div class="page__hd">
|
|
<h1 class="page__title">Progress</h1>
|
|
<p class="page__desc">进度条</p>
|
|
</div>
|
|
<tiny-progress class="progress" :percentage="percentage"></tiny-progress>
|
|
<tiny-button type="primary" @click="run">{{ action }}</tiny-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { Progress, Button } from '@opentiny/vue'
|
|
|
|
// import { setInterval, clearInterval } from 'timers'
|
|
|
|
export default {
|
|
components: {
|
|
TinyProgress: Progress,
|
|
TinyButton: Button
|
|
},
|
|
data() {
|
|
return {
|
|
percentage: 0,
|
|
action: '上传',
|
|
timeId: null
|
|
}
|
|
},
|
|
methods: {
|
|
run() {
|
|
const that = this
|
|
if (this.timeId) {
|
|
clearInterval(this.timeId)
|
|
this.action = '上传'
|
|
this.timeId = null
|
|
} else {
|
|
this.action = '暂停'
|
|
this.timeId = setInterval(() => {
|
|
if (that.percentage < 100) {
|
|
that.percentage += 10
|
|
} else {
|
|
that.percentage = 0
|
|
}
|
|
}, 500)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page__hd {
|
|
padding: 40px;
|
|
}
|
|
.page__title {
|
|
font-weight: 400;
|
|
font-size: 21px;
|
|
text-align: left;
|
|
}
|
|
.page__desc {
|
|
margin-top: 5px;
|
|
color: #888;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
}
|
|
.progress {
|
|
margin-bottom: 20px;
|
|
}
|
|
.circle-progress {
|
|
margin-right: 20px;
|
|
}
|
|
</style>
|