1.1、实现目录
先实现目录的布局
这个tab我们可以放到蒙版组件中，上方的目录信息可以单独作为一个组件，同样书签也可以单独封装成一个组件，初次加载的动画也封装成一个组件。接下来我们就开始实现
实现tab
然后实现我们的tab组件的选中状态高亮，我们data中定义一个变量currentTab为1时目录高亮，为2时书签高亮，所以给书签和目录这两个div绑定一个class，如果currentTab===1则目录的有selected样式，为2则书签有selected样式即高亮
动态组件做目录、书签那部分
然后我们来做这个目录组件
我们先来实现上方搜索框
然后接下来我们就搞目录啦
首先我们来获取目录数据，同理到EbookReader中获取电子书目录信息。我们可以看到navigation下toc即为一级目录，第0个其中的subitems即为这个一级目录下的子目录即二级目录，二级目录里面的subitems可能还有三级目录等，然后还有parent表示它的父级目录，label表示目录内容，href表示路径，通过把这个路径传入display方法即可实现对电子书进行渲染，然后display方法中做定位显示
然后这里有一个难点，就是如何将获取过来的树状的数据结构转化为列表那种一维的结构，正确的做法是将树状的这个Array转化为一维的数组。
先解释一下：
扩展运算符，扩展运算符可以对数组做拆分操作。树状结构是如下图那个样子，用扩展运算符如打印‘ ...[1,2] ’那么得出的结果是1 2，可以看到输出 1，2 ，即被拆开了拆成了两个数。这个概念是非常重要的
举个例子看看使用flatten前后：
有了上面这个目录之后，我们就去判断它的level，即当前目录为哪一层，但是其中并没有level属性，所以并不知道当前是一级目录还是二级目录，不过它给了我们parent，所以我们可以通过parent来判断。
由于没有给层级，所以我们自己给每个目录添加层级level属性，以便后面区分是否缩进。
根据它的父级是谁从而判断它是几级目录，为undefined即为一级目录；如果父级是存在的，那么就去判断它的父级是不是一级目录，如果它的父级是一级目录那么它就是二级目录；如果它是三级目录四级目录就不怎么容易判断了。所以在扁平化处理后，我们定义一个函数给每个item添加一个层级level属性。这样就能知道这个目录是第几级目录了
举例如下树状结构，变成一维数组，再往一维数组中每一个元素添加level
处理好了目录数据后，接下来我们就来实现目录的列表
准备滚动条组件
我们在component下建一个common文件夹，这里放一些通用的组件，我们做一个滚动条组件叫Scroll.vue。滚动条组件中有插槽，我们在目录组件中用<scroll></scroll>包起来的就会被放到这里；然后滚动条组件中如下接收top和bottom，即滚动条距离顶部和底部的距离；滚动条滚动时定义下面那个handleScroll方法，方法中滚动条滚动了就去调用目录组件中的onScroll方法并且把滚动的偏移量传过去。
再加个如下的工具方法，计算高度的时候用
二级目录三级目录咋缩进呢，用一个动态style绑定一个方法，方法中根据level来算
但是二级目录没有缩进，我们就给它绑定一个style，style跟一个方法，这个方法中返回一个margin-left样式，样式大小就根据它level*15来算，如下
然后实现当前目录高亮显示
然后我们实现点击事件
点击后我们就去渲染点击章节的内容嘛，那么就是去调minxin中的display方法，我们获取目录的时候那个navigation就有href即目录章节的路径，把路径传进display中即可实现渲染当前章节了
1.2、接下来实现全文搜索功能
全文搜索算法官方已经提供给我们了，在epubjs源码地址下wiki中有那个doSearch方法。
我们复制放到目录方法中，先定搜added，看看能不能返回搜索结果，如下我们在mounted钩子函数中去调用这个方法，可以看到有搜索结果回来
取消的时候清空搜索框里的内容以及搜索列表中的内容，让请求回来的结果给searchList
给样式
最终
现在我们做事件绑定，完成我们输入内容和搜索结果的匹配
然后我们给关键字加入高亮显示
但是还是没高亮成功，因为如下这种方式会把item.excerpt解析为文本，我们应该使用v-html，将item.excerpt作为html内容载入
如下，就实现了高亮
最后我们做点击事件，点击搜索出来的可以渲染当前页面内容出来
到此目录和搜索功能就实现完成了