Skip to content

Display page number for current chapter

<template>
    <div style="height: 100vh; position: relative;">
        <vue-reader url="/vue-book-reader/files/啼笑因缘.fb2" :getRendition="getRendition" />
        <div :class="$style.page">{{ page }}</div>
    </div>
</template>

<script setup>
import { VueReader } from 'vue-book-reader'
import { ref } from 'vue'

const page = ref('')
const getRendition = (rendition) => {
    rendition.addEventListener('relocate', ({ detail }) => {
        const { tocItem } = detail
        page.value = tocItem?.label || ''
    })
}
</script>
<style module>
.page {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    z-index: 1;
    color: #000;
}
</style>