主题设置功能

this.themes.register（name, style）//	this.themes.register将我们的主题注册到themes对象当中
this.themes.select(name)//可以通过主题的名称快速的切换主题

创建主题数组

themeList： [
{	name: 'default',
style: {
body: {
'color': '#000',
'background': '#fff'
}
}
},
{	name: 'eye',
style: {
body: {
'color': '#000',
'background': '#ceeaba'
}
}
},
{	name: 'nignt',
style: {
body: {
'color': '#fff',
'background': '#000'
}
}
},
{	name: 'gold',
style: {
body: {
'color': '#000',
'background': 'rgb(241,236,226)'
}
}
}
]

methods: {
setTheme(index) {
this.themes.select(this.themeList[index].name)
this.defaultTheme = index
},
registerTheme() {
this.themeList.forEach(theme => {
this.themes.register(theme.name, theme.style)
})
},
showEpubs() {
this.book = new Epub(DOWNLOAD_URL)
this.rendition = this.book.renderTo('read', {
width: window.innerWidth,
height: window.innerHeight
}
),
this.registerThemes()
this.setTheme(this.defaultTheme)
}
}

data () {
return {
defaultTheme: 0
}
}

<div class="settting-theme">
<div class="setting-theme-item" v-for="(item,index) in themeList" :key="index">
<div class="preview" :style="background: item.style.body.background	"></div>
<div class="text">{{item.name}}</div>
</div>
</div>

.setting-theme{
height: 100%; //高度撑满
display: flex;
.setting-thme-item{
flex: 1; //
display: flex;
flex-direction: column;
.preview{
flex: 1;
}
.text{
flex: 0 0 px2rem(30);
font-size: px2rem(16);
}
}
}