设置字体font-family --项目开发记录（六）

功能点

点击设置字体font-family，设置弹窗出现
点击弹窗的向下箭头或者选择字体后关闭弹窗
选择字体后选中的那列显示高亮，并且EbookMenu组件中的设置按钮中的文字也发生变化
选择字体后电子书的字体随之改变
在菜单栏和标题栏关闭的时候，设置弹窗也关闭

功能点1实现

创建EbookSettingFontPopup.vue组件，并在EbookMenu.vue组件中引用；
在utils/book.js文件中添加字体数组，然后EbookSettingFontPopup.vue组件引入该数组,通过for循环生成字体列表
book.js

export const FONT_FAMILY = [{ font: 'Default' },{ font: 'Cabin' },{ font: 'Days One' },{ font: 'Montserrat' },{ font: 'Tangerine' }
]

EbookSettingFontPopup.vue组件引入

import { FONT_FAMILY } from '../../utils/book'
export default {data(){return{fontFamily: FONT_FAMILY}}
}

通过vuex创建fontFamilyVisible变量来控制设置窗口；
在EbookSettingFont.vue组件中通过showFontFamilySetting来显示设置窗口;

showFontFamilySetting() {this.setFontFamilyVisible(true)
}

功能点2实现

在EbookSettingFontPopup.vue组件中通过修改fontFamilyVisible的值来实现

hideFontFamilySetting() {this.setFontFamilyVisible(false)},setFontFamily(font) {this.setDefaultFontFamily(font)this.setFontFamilyVisible(false)}

功能点3实现

        <div class="ebook-popup-item" v-for="(item, index) in fontFamily" :key="index"@click="setFontFamily(item.font)"><div class="ebook-popup-item-text" :class="{'selected': isSelected(item)}">{{item.font}}</div><div class="ebook-popup-item-check" v-if="isSelected(item)"><span class="icon-check"></span></div></div>isSelected(item) {return this.defaultFontFamily === item.font},hideFontFamilySetting() {this.setFontFamilyVisible(false)},setFontFamily(font) {this.setDefaultFontFamily(font)this.setFontFamilyVisible(false)}

功能点4实现

在EbookSettingFontPopup.vue组件中通过setFontFamily方法实现，但是只这样的话，是没有效果的，因为电子书是在ifram中的，所以我们要把字体文件插入到ifram中才能有效果

setFontFamily(font) {this.setDefaultFontFamily(font)this.setFontFamilyVisible(false)// 当选择的字体为默认字体的时候,设置为Times New Roman，否则的话设置为选择的字体if(font == 'Default'){this.currentBook.rendition.themes.font('Times New Roman')}else{this.currentBook.rendition.themes.font(font)}}

ifram中注入字体文件
EbookReader.vue组件的initEpub()方法中使用rendition钩子函数

// 表示当阅读器渲染完以后，可以获取资源文件的时候，使用该方法
// contents对象主要用来管理资源
this.rendition.hooks.content.register(contents => {// 添加样式文件，其中传入的值必须为url地址，而不能为路径地址// 所以我们可以把字体文件放到nginx静态资源服务器下，放好之后记得重启ngix和运行npm run sreve// 如果我们想在字体加载完成之后做一些事，我们可以使用Promise对象// 当我们发布到线上以后，本地的http://192.168.0.100:8081/是需要修改，为了使线上和线下使用不同的url，所以这个地址我们需要用到vue-cli3.0的环境变量Promise.all([contents.addStylesheet('http://192.168.0.100:8081/fonts/cabin.css'),contents.addStylesheet('http://192.168.0.100:8081/fonts/daysOne.css'),contents.addStylesheet('http://192.168.0.100:8081/fonts/montserrat.css'),contents.addStylesheet('http://192.168.0.100:8081/fonts/tangerine.css') ]).then(() => {console.log('已经加载完毕，干些什么呢')})})

使用vue-cli3中的环境变量配置url
创建一个与src目录平级的.env.development的环境变量文件；
然后将我们的url抽离出来写成一个变量，注意在vue-cli3.0中创建的变量必须以VUE_APP开头，否则就没有办法找到这个变量
.env.development文件

VUE_APP_RES_URL = http://192.168.0.100:8081

使用该变量

this.rendition.hooks.content.register(contents => {// 添加样式文件，其中传入的值必须为url地址，而不能为路径地址// 所以我们可以把字体文件放到nginx静态资源服务器下，放好之后记得重启ngix和运行npm run sreve// 如果我们想在字体加载完成之后做一些事，我们可以使用Promise对象// 当我们发布到线上以后，本地的http://192.168.0.100:8081/是需要修改，为了使线上和线下使用不同的url，所以这个地址我们需要用到vue-cli3.0的环境变量Promise.all([contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/cabin.css`),contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/daysOne.css`),contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/montserrat.css`),contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/tangerine.css`) ]).then(() => {console.log('已经加载完毕，干些什么呢')})})

设置完成之后记得重启服务器

功能点5实现

在EbookReader.vue组件的prevPage、nextPage、showTitleAndMenu事件中添加this.setFontFamilyVisible(false);