当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 第四章

第四章

2020年07月24日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网