（三）阅读器开发

核心工作原理

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对象

设置改变字号的函数