フォントfont-familyの設定--プロジェクト開発記録(六)

きのうてん

設定フォントfont-familyをクリックすると、設定弾窓が

表示されます.

弾窓の下向き矢印をクリックするか、フォントを選択して弾窓

を閉じる.

フォントを選択すると選択する列がハイライト表示され、EbookMenuコンポーネントの設定ボタンの文字も

変化する.

フォントを選択すると、電子書籍のフォントが

に変更されます.

メニューバーやタイトルバーが閉じるときは、パチンコ窓を設けても

を閉じる.
機能点1実装
EbookSettingFontPopupを作成します.vueコンポーネント、そしてEbookMenu.vueコンポーネントで参照;ここにいるよ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コンポーネントにshowFontFamilySettingsで設定ウィンドウを表示します.

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-cli 3の環境変数構成urlを使用してsrcディレクトリと平レベルのものを作成します.env.開発の環境変数ファイル;それからurlを抽出して変数に書き、vue-cli 3に注意します.0で作成した変数はVUE_でなければなりません.アプリの冒頭で、そうでなければこの変数を見つけることができません.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);