阅读进度条 --项目记录（10）

功能点

1. 记录阅读时间
2. 拖动进度条松开后会电子书会跳转到指定位置，不单单显示进度百分比，还显示章节的名称
3. 左右两边的按钮可以快速的切换到上一章和下一章，并且能够正确的计算出进度百分比
4. 翻页后进度百分比和进度条也随之改变
5. 阅读位置实时保存

功能实现

1. 创建EbookSettingProgress.vue组件，并在EbookMenu组件中使用
2. 在EbookMenu组件中的小太阳上添加showSetting(2)事件
3. 在vuex中创建progress、bookAvailable两个公共变量
4. 在EbookReader.vue组件的initEpub方法中添加分页功能；首先我们可以简化下initEpub方法

   // 当电子书加载完成后
   this.book.ready.then(() => {
      // 生成目录
      this.navigation = this.book.navigation
      // 生成Locations对象
      return this.book.locations.generate()
   }).then(result => {
       // 标记电子书为解析完毕状态
       this.setBookAvailable(true)
   })
   

5. 在EbookSettingProgress.vue组件实现拖动进度条进行渲染电子书

     onProgressInput(progress) {
       this.displayProgress(progress);
     },
     onProgressChange(progress) {
       this.displayProgress(progress);
     },
     displayProgress(progress) {
      //设置百分数
      const percentage = progress / 100;
      // 获得cfi地址
      const location = percentage > 0 ? this.currentBook.locations.cfiFromPercentage(percentage) : 0;
      // 根据cfi地址渲染电子书
      this.currentBook.rendition.display(location);
      // 修改progress变量,去除小数位
      this.setProgress(parseInt(percentage*100))
      // 设置缓存值
      saveLocation(this.fileName,{location:location,progress:parseInt(percentage*100)})
      this.updateProgre