第四章
程序员文章站
2022-06-19 16:07:08
4-1.阅读器的需求分析4-2.阅读器的解析和渲染 1.解压需要的电子书到Nginx目录2.新建一个入口文件3.建动态路由组件EbookReader.vue,接收动态路由4.利用vuex传递fileName,拼出url5.引入epubjs实例化一个对象,利用renderTo方法进行电子书渲染4-3.阅读器翻页功能实现1电子书实现原理,利用iframe2.epubjs提供了on方法,让我们可以将事件绑定到iframe上3.分析要用到的event数据4....
4-1.阅读器的需求分析
4-2.阅读器的解析和渲染
1.解压需要的电子书到Nginx目录
2.新建一个入口文件
3.建动态路由组件EbookReader.vue,接收动态路由
4.利用vuex传递fileName,拼出url
5.引入epubjs实例化一个对象,利用renderTo方法进行电子书渲染
4-3.阅读器翻页功能实现
1电子书实现原理,利用iframe
2.epubjs提供了on方法,让我们可以将事件动态的绑定到iframe上
3.分析要用到的event数据
4.获取手持操作的X轴偏移量和手持操作时间
5.翻阅功能实现
4-4.标题栏和菜单栏的实现
1.新建EbookTitle.vue和EbookMenu.vue两个文件,并且引入到index.vue入口文件中,copy免费课的源码,对结构和样式进行适当修改
2.新建一个变量menuVisible,通过Vuex传值,利用EbookReader.vue里面定义的ToggleTitleAndMenu方法改变menuVisiblede的值实现在点击的时候菜单栏和标题栏的显示和隐藏
3.引入免费课中的transition过度动画
4.在EbookReader.vue文件里新建hideTitleAndMenu方法,在翻页功能中进行引用 ,实现在翻页的时候标题栏和菜单栏的显示和隐藏
5.利用vuex和mixin实现vue组件间的解耦和复用
6.将mapActions方法也方入mixin中,实现代码更高层度的复用
4-5.字号设置UI实现
1.创建EbookSettingFont.vue组件实现字号设置面板,并且引入到Ebook menu.vue中;
在vuex中创建变量settingVisible,实现字号设置面板的显示和隐藏。
2.在EbookMenu.vue中实现showSetting方法
3.在utils目录下新建book.js文件,在book.js对静态变量进行存储
4.对字号设置面板的阴影和高度进行设置
5.实现首次进入,菜单栏上的字号设置面板隐藏,点击以后才出现
4-6. 字号设置功能实现
1.在vuex中新建变量cuurentBook,将this.book写入到vuex当中
4-7.字体设置功能实现
1.结构
对样式进行修改
4-8.字体设置弹窗UI实现
1.新建一个字体弹窗组件EbookSettingFontPopup.vue,并且引入到EbookMenu.vue中
通过showSettingFamily方法改变fontFamilyVisible的值,实现字体设置弹窗的显示
字体弹窗的结构,给向下图标添加点击事件,实现弹出框的隐藏
hide方法的实现
相应的样式实现
设置过度动画及时间
定义字体列表
字体列表结构
4-9.字体设置弹窗功能实现
1.字体设置面板的隐藏
给选中字体条目添加点击事件
添加setFontFamily方法,实现字体的切换
在阅读器文件引入外部的字体css样式,引入方法如下:
字体加载完以后还想做一些其他操作,通过promise.all()方法
表示静态资源的资源路径必须以VUE_APP开头(静态资源不需要引入)
4-10.字号和字体设置离线缓存
安装web-storage-cache包
本文地址:https://blog.csdn.net/zpfnext/article/details/107534455