31 lines
828 B
Vue
31 lines
828 B
Vue
<template>
|
|
<div>
|
|
<div class="progress" style="height: 2px;">
|
|
<div class="progress-bar" role="progressbar" :style="{width:progressPercent+'%'}"></div>
|
|
<div class="progress-bar bg-secondary bg-opacity-10" role="progressbar"
|
|
:style="{width:100-progressPercent+'%'}"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {UPDATING_PROGRESS_SUCCESS} from '../store/mutation-types'
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: 'Progressbar',
|
|
props: {
|
|
totalPages: Number,
|
|
readPages: Number
|
|
},
|
|
computed: {
|
|
...mapState('bookprogressmodule', ['progress']),
|
|
progressPercent() {
|
|
return Math.round(this.progress / this.totalPages * 100);
|
|
}
|
|
},
|
|
created() {
|
|
this.$store.commit('bookprogressmodule/' + UPDATING_PROGRESS_SUCCESS, this.readPages);
|
|
},
|
|
}
|
|
</script> |