@airhang/vue-book-reader 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +97 -0
- package/dist/demo.html +1 -0
- package/dist/vue-book-reader.common.js +3378 -0
- package/dist/vue-book-reader.common.js.map +1 -0
- package/dist/vue-book-reader.css +1 -0
- package/dist/vue-book-reader.umd.js +3389 -0
- package/dist/vue-book-reader.umd.js.map +1 -0
- package/dist/vue-book-reader.umd.min.js +32 -0
- package/dist/vue-book-reader.umd.min.js.map +1 -0
- package/package.json +36 -0
- package/src/components/BookCatalogueDrawer.vue +839 -0
- package/src/components/BookReader.vue +3003 -0
- package/src/index.js +30 -0
package/README.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Vue Book Reader
|
|
2
|
+
|
|
3
|
+
一个功能丰富的Vue.js书籍阅读器组件，支持多种翻页模式、目录导航和页码跳转。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 📖 多种翻页模式：仿真翻页、滑动、淡入淡出、垂直滚动、截断特效、卡片风格
|
|
8
|
+
- 📑 目录导航：支持多级目录结构
|
|
9
|
+
- 🔍 页码跳转：快速跳转到指定页面
|
|
10
|
+
- 📱 响应式设计：自动适配PC端和移动端
|
|
11
|
+
- 🎨 自动隐藏控件：提供沉浸式阅读体验
|
|
12
|
+
- 🔍 缩放和拖拽：支持双指缩放和拖拽查看
|
|
13
|
+
|
|
14
|
+
## 安装
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install vue-book-reader
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 使用
|
|
21
|
+
|
|
22
|
+
### 全局注册
|
|
23
|
+
|
|
24
|
+
```javascript
|
|
25
|
+
import Vue from 'vue'
|
|
26
|
+
import VueBookReader from 'vue-book-reader'
|
|
27
|
+
|
|
28
|
+
Vue.use(VueBookReader)
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 局部注册
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
import { BookReader } from 'vue-book-reader'
|
|
35
|
+
|
|
36
|
+
export default {
|
|
37
|
+
components: {
|
|
38
|
+
BookReader
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 基本用法
|
|
44
|
+
|
|
45
|
+
```vue
|
|
46
|
+
<template>
|
|
47
|
+
<book-reader
|
|
48
|
+
:pages="pages"
|
|
49
|
+
:book-id="bookId"
|
|
50
|
+
flip-mode="flip"
|
|
51
|
+
@page-change="onPageChange"
|
|
52
|
+
/>
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script>
|
|
56
|
+
export default {
|
|
57
|
+
data() {
|
|
58
|
+
return {
|
|
59
|
+
bookId: '123',
|
|
60
|
+
pages: [
|
|
61
|
+
'https://example.com/page1.jpg',
|
|
62
|
+
'https://example.com/page2.jpg',
|
|
63
|
+
// ...
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
methods: {
|
|
68
|
+
onPageChange(page) {
|
|
69
|
+
console.log('当前页码:', page)
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
</script>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Props
|
|
77
|
+
|
|
78
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
79
|
+
|------|------|------|--------|
|
|
80
|
+
| pages | 页面图片数组 | Array | [] |
|
|
81
|
+
| bookId | 书籍ID | String | '' |
|
|
82
|
+
| flipMode | 翻页模式 (flip/slide/fade/scroll/clip/card) | String | 'flip' |
|
|
83
|
+
| startPage | 起始页码 | Number | 1 |
|
|
84
|
+
|
|
85
|
+
## Events
|
|
86
|
+
|
|
87
|
+
| 事件名 | 说明 | 回调参数 | 使用场景 |
|
|
88
|
+
|--------|------|----------|----------|
|
|
89
|
+
| page-change | 页码变化时触发 | (pageNumber) | 监听用户翻页行为 |
|
|
90
|
+
| fetch-books-data | 需要获取书籍数据时触发 | (bookId) | 组件挂载时获取书籍数据 |
|
|
91
|
+
| record-progress | 需要记录阅读进度时触发 | ({ bookId, pageNumber }) | 翻页时记录用户阅读进度 |
|
|
92
|
+
| catalogue-click | 目录项点击时触发 | (item) | 用户点击目录项 |
|
|
93
|
+
| fetch-catalogue | 需要获取目录数据时触发 | (bookId) | 打开目录时获取目录数据 |
|
|
94
|
+
|
|
95
|
+
## License
|
|
96
|
+
|
|
97
|
+
MIT
|
package/dist/demo.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<!doctype html><meta charset="utf-8"><title>vue-book-reader demo</title><script src="./vue-book-reader.umd.js"></script><link rel="stylesheet" href="./vue-book-reader.css"><script>console.log(vue-book-reader)</script>
|