Vue开发Web阅读器（二）

接下来开发当点击菜单栏中的字体按钮时会弹出字体设置框，且当点击center处时菜单栏和字体设置框都会隐藏

显示的方式比较简单，但当点击center处字体设置框隐藏需要用到一个技巧

字体设置框中设置一个隐藏自己的方法，当点击center处时父组件Ebook.vue调用子组件字体设置框的隐藏方法

this.refs.menuBar.hiddenFontSizeControl()

 

然后开发字体设置功能，Ebook.vue中定义7个字体大小的列表和默认字体大小，传给子组件MenuBar，MenuBar根据这2个数据来展示字体圆圈的位置，其他位置被点击时通过向父组件Ebook触发changeFontSize事件，并携带被点击位置的FontSize

    changeFontSize (fontSize) {
      this.$emit('changeFontSize', fontSize)
    }

父组件触发changeFontSize事件

    changeFontSize (fontSize) {
      this.defaultFontSize = fontSize
      if (this.themes) {
        this.themes.fontSize(fontSize)
      }
    }

这里说明一下，epubjs将epub电子书解析成Book对象，再通过Book对象生成Rendition对象，Rendition对象中有一个thems对象可以设置字体大小，需传入参数字体大小（必须是20px此类样式，不能省略px）

并调用初始的默认字体

    // 电子书解析和渲染
    showEpub () {
      // 生成Ebook
      this.book = new Epub(DOWNLOAD_URL)
      // 生成Rendition,通过Book.renderTo方法生成
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth,
        height: window.innerHeight
      })
      // 通过Rendition.display渲染电子书
      this.rendition.display()
      this.themes = this.rendition.themes
      // 设置初始字体大小
      this.changeFontSize(this.defaultFontSize)
    },

开发主题切换

thems对象可以注册主题，然后可以通过theme.select(name)方式来切换主题

    // 注册主题
    registerTheme () {
      this.themeList.forEach(theme => {
        this.themes.register(theme.name, theme.style)
      })
    }

阅读进度功能实现