web阅读器的开发过程与体会（VUE+epubjs）

methods:{

//电子书的解析和渲染

showEpub(){

//生成book

this.book = new Epub(DOWNLOAD_URL);

//生成rendition，通过renderTo方法

this.rendition = this.book.renderTo(‘read’,{

width:window.innerWidth,

height:window.innerHeight

})

//通过rendition.display渲染电子书

this.rendition.display();

}

},

mounted(){

this.showEpub();

}

}

电子书翻页功能 的实现

步骤

1. 通过rendition.prev()翻到上一页

2. 通过rendition.next（）翻到下一页

实际应用代码：

prevPage(){

this.rendition.prev();

},

nextPage(){

this.rendition.next();

}

标题栏的实现以及点击显示和消失

菜单栏的实现以及点击出现和消失

v-show=“ifTitleAndMenuShow”

<span class=“icon-menu icon” @click=“showSetting(3)”>

<span class=“icon-progress icon” @click=“showSetting(2)”>

<span class=“icon-bright icon” @click=“showSetting(1)”>

<span class=“icon-a icon” @click=“showSetting(0)”>A