接下来开发当点击菜单栏中的字体按钮时会弹出字体设置框,且当点击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)
})
}
阅读进度功能实现