3.8 字体设置弹窗功能实现
实现点击屏幕,字体设置面板消失:
toggleTitleAndMenu () {
if (this.menuVisible) {
// 隐藏字号设置面板
this.setSettingVisible(-1)
this.setFontFamilyVisible(false) // 实现点击屏幕,字体设置面板消失
}
// 显示标题和菜单栏
this.setMenuVisible(!this.menuVisible)
},
hideTitleAndMenu () {
this.setMenuVisible(false)
this.setSettingVisible(-1)
this.setFontFamilyVisible(false)// 实现点击屏幕,字体设置面板消失
},
实现字体被选中
给item绑定点击事件
<div class="ebook-popup-item" v-for="(item, index) in fontFamilyList" :key="index"
@click="setFontFamily(item.font)">
定义setFontFamily函数
setFontFamily (font) {
this.setDefaultFontFamily(font)
}
接下来实现,字体的切换的生效
与字号类似,在currentBook下面调用rendition
setFontFamily (font) {
this.setDefaultFontFamily(font)
this.currentBook.rendition.themes.font(font)
}
但这里没有生效,因为scss文件没有引入iframe
回到EbookReader.vue中,在initEpub函数中,使用rendition的钩子函数
this.rendition.hooks.content.register(contents => {
contents.addStylesheet(`...`)
})
根据contents.js源码,省略号这里必须传入一个url,那么我们利用nginx来实现。
我们把fonts文件放入resource文件夹,生成Http链接可以引用到钩子函数中
这是default字体未生效,通过改动setFontFamily方法来解决
setFontFamily (font) {
this.setDefaultFontFamily(font)
if (font === 'Default') {
// 设置自己喜欢的字体
this.currentBook.rendition.themes.font('Times New Roman')
} else {
this.currentBook.rendition.themes.font(font)
}
}
到这里,基本功能实现,我们做一些改动。
在Vue-CLI3.0中环境变量和模式设置,为以后上线做准备
在根目录下创建一个文件.env.development,把我们本地的url抽象成一个变量下入该文件。
注意一点,只有以 VUE_APP_
开头的变量会被 webpack.DefinePlugin
静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们:
console.log(process.env.VUE_APP_SECRET)
所以我们的变量如下:
VUE_APP_RES_URL=http://192.168.0.102:8081
下面我们就可以使用了
this.rendition.hooks.content.register(contents => {
Promise.all(
[
contents.addStylesheet(`${
process.env.VUE_APP_RES_URL}/fonts/daysOne.css`), contents.addStylesheet(`${
process.env.VUE_APP_RES_URL}/fonts/cabin.css`),
contents.addStylesheet(`${
process.env.VUE_APP_RES_URL}/fonts/montserrat.css`, contents.addStylesheet(`${
process.env.VUE_APP_RES_URL}/fonts/tangerine.css`)
]
)
})
!环境变量和配置变量的重新载入都需要重新启动服务器才能生效。
3.9实现字号和字体的离线存储
我们这里利用Local Storage进行离线缓存,首先,安装库npm i --save web-storage-cache
在utils下面引入这个库
创建一个localStorage.js文件,将安装的库引入。这个库可以将我们传入的字符串或对象转换成json存储,读取时又能转换成字符串或对象使用。随后创建一个实例化对象,写入基本方法。
import Storage from 'web-storage-cache'
const localStorage = new Storage()
export function getLocalStorage (key) {
return localStorage.get(key)
}
export function setLocalStorage (key, value) {
return localStorage.set(key, value)
}
export function removeLocalStorage (key) {
return localStorage.delete(key)
}
export function clearLocalStorage () {
return localStorage.clear()
}
export function getHome () {
return getLocalStorage('home')
}
export function saveHome (home) {
return setLocalStorage('home', home, 1800)
}
export function getLocale () {
return getLocalStorage('locale')
}
export function saveLocale (locale) {
return setLocalStorage('locale', locale)
}
export function getLocation (fileName) {
return getBookObject(fileName, 'location')
}
export function saveLocation (fileName, location) {
setBookObject(fileName, 'location', location)
}
export function getBookmark (fileName) {
return getBookObject(fileName, 'bookmark')
}
export function saveBookmark (fileName, bookmark) {
setBookObject(fileName, 'bookmark', bookmark)
}
export function getReadTime (fileName) {
return getBookObject(fileName, 'time')
}
export function saveReadTime (fileName, theme) {
setBookObject(fileName, 'time', theme)
}
export function getProgress (fileName) {
return getBookObject(fileName, 'progress')
}
export function saveProgress (fileName, progress) {
setBookObject(fileName, 'progress', progress)
}
export function getNavigation (fileName) {
return getBookObject(fileName, 'navigation')
}
export function saveNavigation (fileName, navigation) {
setBookObject(fileName, 'navigation', navigation)
}
export function getMetadata (fileName) {
return getBookObject(fileName, 'metadata')
}
export function saveMetadata (fileName, metadata) {
setBookObject(fileName, 'metadata', metadata)
}
export function getCover (fileName) {
return getBookObject(fileName, 'cover')
}
export function saveCover (fileName, cover) {
setBookObject(fileName, 'cover', cover)
}
export function getFontFamily (fileName) {
return getBookObject(fileName, 'fontFamily')
}
export function saveFontFamily (fileName, fontFamily) {
setBookObject(fileName, 'fontFamily', fontFamily)
}
export function getTheme (fileName) {
return getBookObject(fileName, 'theme')
}
export function saveTheme (fileName, theme) {