43 lines
909 B
Vue
43 lines
909 B
Vue
<template>
|
|
<div>
|
|
<div class="progress" style="height: 2px;">
|
|
<div class="progress-bar" role="progressbar" :style="{width:progress+'%'}"></div>
|
|
<div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" :style="{width:100-progress+'%'}"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {EventBus} from "../event-bus";
|
|
|
|
export default {
|
|
name: 'Progressbar',
|
|
components: {
|
|
EventBus
|
|
},
|
|
props: {
|
|
totalPages: Number,
|
|
readPages: Number
|
|
},
|
|
data() {
|
|
return {
|
|
newProgress: this.readPages
|
|
}
|
|
},
|
|
computed: {
|
|
progress() {
|
|
return Math.round(this.newProgress / this.totalPages * 100);
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
created() {
|
|
window.EventBus.$on('updateProgress', (data) => {
|
|
this.newProgress = data.readPages;
|
|
console.info(this.newProgress);
|
|
console.info(this.progress);
|
|
});
|
|
},
|
|
methods: {}
|
|
}
|
|
</script> |