Vue Book Reader

一个功能丰富的Vue.js书籍阅读器组件，支持多种翻页模式、目录导航和页码跳转。

特性

• 📖 多种翻页模式：仿真翻页、滑动、淡入淡出、垂直滚动、截断特效、卡片风格
• 📑 目录导航：支持多级目录结构
• 🔍 页码跳转：快速跳转到指定页面
• 📱 响应式设计：自动适配PC端和移动端
• 🎨 自动隐藏控件：提供沉浸式阅读体验
• 🔍 缩放和拖拽：支持双指缩放和拖拽查看

安装

npm install vue-book-reader

使用

全局注册

import Vue from 'vue'
import VueBookReader from 'vue-book-reader'

Vue.use(VueBookReader)

局部注册

import { BookReader } from 'vue-book-reader'

export default {
  components: {
    BookReader
  }
}

基本用法

<template>
  <book-reader
    :pages="pages"
    :book-id="bookId"
    flip-mode="flip"
    @page-change="onPageChange"
  />
</template>

<script>
export default {
  data() {
    return {
      bookId: '123',
      pages: [
        'https://example.com/page1.jpg',
        'https://example.com/page2.jpg',
        // ...
      ]
    }
  },
  methods: {
    onPageChange(page) {
      console.log('当前页码:', page)
    }
  }
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | pages | 页面图片数组 | Array | [] | | bookId | 书籍ID | String | '' | | flipMode | 翻页模式 (flip/slide/fade/scroll/clip/card) | String | 'flip' | | startPage | 起始页码 | Number | 1 |

Events

| 事件名 | 说明 | 回调参数 | 使用场景 | |--------|------|----------|----------| | page-change | 页码变化时触发 | (pageNumber) | 监听用户翻页行为 | | fetch-books-data | 需要获取书籍数据时触发 | (bookId) | 组件挂载时获取书籍数据 | | record-progress | 需要记录阅读进度时触发 | ({ bookId, pageNumber }) | 翻页时记录用户阅读进度 | | catalogue-click | 目录项点击时触发 | (item) | 用户点击目录项 | | fetch-catalogue | 需要获取目录数据时触发 | (bookId) | 打开目录时获取目录数据 |

License

MIT