核心工作原理
1.电子书的解析和渲染
在Ebook.vue组件的script中包含以下代码
import Epub from "epubjs"
const BookUrl = '/static/2018_Book_AgileProcessesInSoftwareEngine.epub'
export default {
methods: {
//电子书的解析和渲染
showEpub () {
//生成book
this.book = new Epub(BookUrl)
//生成Rendition,通过Book.renderTo
this.Rendition = this.book.renderTo('bookshow',{
width: window.innerWidth,
height: window.innerHeight
})
//通过Rention.display渲染电子书
this.Rendition.display()
}
},
mounted () {
this.showEpub()
}
}
在vue的钩子函数mounted中调用methods中定义的函数,渲染这个界面。
2.翻页功能
在电子书挂载的节点下面新建一个div当作遮罩层
这个遮罩层分三个区域,左 中 右
- 点击左边=上一页
- 点击右边=下一页
用弹性盒模型布局这个遮罩层
.read-wrapper {
.mask {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
z-index: 100;
display: flex;
.left {
flex: 0 0 px2rem(100);
}
.center {
flex:1;
}
.right {
flex: 0 0 px2rem(100);
}
}
}
3.标题栏和菜单栏实现
3.1 静态布局
创建两个组件Title和menu,分别代表上菜单栏和下菜单栏
在Ebook.vue组件中引入这两个组件
然后对两个菜单进行布局
一样是使用弹性盒模型flex布局
<template>
<div class="title-wrapper">
<div class="left">
<span class="icon-back icon"></span>
</div>
<div class="right">
<div class="icon-wrapper">
<span class="icon-cart icon"></span>
</div>
<div class="icon-wrapper">
<span class="icon-person icon"></span>
</div>
<div class="icon-wrapper">
<span class="icon-more icon"></span>
</div>
</div>
</div>
</template>
.title-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: px2rem(48);
z-index: 101;
background: white;
display: flex;
box-shadow: 0 px2rem(8) px2rem(8) rgba(0,0,0,.15);
.left {
flex: 0 0 px2rem(60);
@include center
}
.right {
flex: 1;
display: flex;
justify-content: flex-end;
.icon-wrapper {
flex: 0 0 px2rem(40);
@include center;
.icon-cart {
font-size: px2rem(22);
}
}
}
}
3.2 加入动画效果
实现单击中间遮罩层菜单出现,再次单击消失,加入动画效果
给两个菜单组件套上transition标签
并且加上name
<transition name="slide-down">
<title-wrapper v-show="ifTitleAndMenuShow"></title-wrapper>
</transition>
<transition name="slide-up">
<menu-wrapper v-show="ifTitleAndMenuShow"></menu-wrapper>
</transition>
然后根据vue的transition用法,在global.scss中书写代码
.slide-down-enter ,
.slide-down-leave-to
{
transform: translate3d(0, -100%, 0);
}
.slide-down-enter-to ,
.slide-down-leave,
.slide-up-enter-to ,
.slide-up-leave
{
transform: translate3d(0, 0, 0);
}
.slide-down-enter-active ,
.slide-down-leave-active,
.slide-up-enter-active ,
.slide-up-leave-active
{
transition: all .3s linear;
}
.slide-up-enter ,
.slide-up-leave-to {
transform: translate3d(0, 100%, 0);
}
字号设置功能实现
字号设置的界面设计
大体规划是:
- 左右各有一个示范的字体大小A,用flex:0 0 px2rem()
其样式可以用:style=“minSize或maxSize”,minSize在computed中定义,注意最后要+‘px’ - 中间有7个字号可供选择,整个中间用flex:1;进行自动伸展,细分内部是,左边一个横线,中间一个竖线,右边一个横线,用伪类选择器把头部和尾部隐藏。 然后再嵌套两个圆,作为选择点。
<div class="setting-wrapper" v-show="ifSettingHidden">
<div class="setting-font-size">
<div class="preview" :style="minSize">A</div>
<div class="select">
<div class="select-wrapper"
v-for="(item,index) in fontSizeList"
:key="index"
@click="setFontSize(item.fontSize)"
>
<div class="line"></div>
<div class="point-wrapper">
<div class="point"
v-show="defaultFontSize === item.fontSize">
<div class="small-point" ></div>
</div>
</div>
<div class="line"></div>
</div>
</div>
<div class="preview">A</div>
</div>
</div>
字号设置的逻辑
在父组件Ebook.vue的data中加一个数组,代表字体大小的几种选项,并且定义一个默认字体defaultFontSize
fontSizeList:[
{fontSize:12},
{fontSize:14},
{fontSize:16},
{fontSize:18},
{fontSize:20},
{fontSize:22},
{fontSize:24}
],
defaultFontSize: 16
然后将这两个变量传递给子组件Menu.vue
其中fontSizeList作为字号标签的循环变量,创建了7个字号
defaultFontSize作为默认字号,用v-show实现它的显示,当此标签的字号等于默认字号时,才显示
当某个字号标签被单击时,传递这个字号到父组件,然后操作defaultFontSize改变位置
然后获取Theme对象
设置改变字号的函数