vue 電子書字體大小設置功能

方法一：父子組件傳值

父組件

 <!--底部菜單欄 -->
	 <menu-bar 
	 :ifTitleAndMenu="ifTitleAndMenu"
	 :defaultFontSize="defaultFontSize"
	  ref="menuBar"
	@setFontSize="selecFont"
    ></menu-bar>

<script>
import Epub from 'epubjs';
import MenuBar from '../components/MenuBar'
//電子書路徑
const DOWNLOAD_URL = '/ebook.epub';
global.epub = Epub;
export default {
	name:'ebook',
	components: {
		TitleBar,
		MenuBar
	},
	data(){
	 return {
		 ifTitleAndMenu:false,
		 defaultFontSize:16 //默認字體大小
	 }
	},
	methods: {
	//字體大小設置
   selecFont(fontSize){
		this.defaultFontSize = fontSize
       if(this.themes){
				 this.themes.fontSize(fontSize + 'px')
			 }
		},
    //菜單欄顯隱
    showMenu(){
			this.ifTitleAndMenu = !this.ifTitleAndMenu
			if(!this.ifTitleAndMenu){
         this.$refs.menuBar.hidesetting()
			}
		}, 
   //電子書解析渲染
		showEpub(){
		 //生成book對象
		 this.book = new Epub(DOWNLOAD_URL) //切記把路徑放對象裏面
		  //console.log(this.book)
			//通過renderTo()生成rendition對象，read爲掛載的dom
			this.rendition = this.book.renderTo('read', {
				width:window.innerWidth,
				height:window.innerHeight
			})
			//通過rendition.display()渲染電子書
			this.rendition.display()
			//獲取theme對象
			this.themes = this.rendition.themes
			this.selecFont(this.defaultFontSize)
		}
	},
	mounted() {
		this.showEpub()
	}
}
</script>

子組件

<div class="select-wrap">
	<div class="select"
	v-for="(item, index) in fontSizeList"
	:key = "index"
		@click="selecFontSize(item.fontSize)" //點擊進度條設置字體大小
	>
		<div class="line"></div>
		<div class="point-wrap">
				<div class="point"
					v-show="defaultFontSize === item.fontSize">								
					<div class="smallpoint"></div>
				</div>
		</div>
		<div class="line"></div>
	</div>
</div>


<script>
export default {
	props: {
    ifTitleAndMenu:{
			type:Boolean,
			default:false
		},
		defaultFontSize:Number
	},
	data(){
	 return {
     isSettingShow:false,
		 fontSizeList:[
			  {fontSize: 12},
				{fontSize: 14},
				{fontSize: 16},
				{fontSize: 18},
				{fontSize: 20},
				{fontSize: 22}
			]
		 
	 }
	},
	computed:{
		 current(){
      return store.state.defaultFontSize
    }
	},
	methods: {
		showsetting(){
      this.isSettingShow = true
		},
		hidesetting(){
			this.isSettingShow = false
		},
  	selecFontSize(fontSize){
		  this.$emit('setFontSize', fontSize)
		}
	}
}
</script>