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

功能点

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

功能点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实现

        

          
{{item.font}}
          

            
          
        
        
      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);