<template>
<view class="ebook" >
<!-- #ifdef H5 MP-WEIXIN -->
<view class="read-wrapper">
<view id="read"></view>
<view class="mask">
<!-- <view class="left" @click="prevPage"></view> -->
<view class="center" :style="{'background-image':'url('+$staticUrl+'static/dzs.png'+')'}" @click="toggleTitleAndMenu"></view>
<!-- <view class="right" @click="nextPage"></view> -->
</view>
</view>
<menu-bar :ifTitleAndMenuShow="ifTitleAndMenuShow" @getCurrentLocation="getCurrentLocation"
:fontSizeList="fontSizeList" :defaultFontSize="defaultFontSize" @setFontSize="setFontSize"
:themeList="themeList" :defaultTheme="defaultTheme" @setTheme="setTheme" :bookAvailable="bookAvailable"
@onProgressChange="onProgressChange" @jumpTo="jumpTo" :navigation="navigation" :parentProgress="progress" @nextPage="nextPage" @prevPage="prevPage"
ref="menuBar">
</menu-bar>
<!-- #endif -->
</view>
</template>
<script>
// #ifndef APP
import Epub from 'epubjs'
import MenuBar from '@/components/epub/MenuBar.vue'
// #endif
export default {
components: {
// #ifndef APP
MenuBar
// #endif
},
data() {
return {
ifTitleAndMenuShow: false,
commonUrl: '',
book: {},
progress: 0,
fontSizeList: [{
fontSize: 12,
},
{
fontSize: 14,
},
{
fontSize: 16,
},
{
fontSize: 18,
},
{
fontSize: 20,
},
{
fontSize: 22,
},
{
fontSize: 24,
},
],
defaultFontSize: 16,
themeList: [{
name: 'default',
style: {
body: {
color: '#000',
background: '#fff',
},
},
},
{
name: 'eye',
style: {
body: {
color: '#000',
background: '#ceeaba',
},
},
},
{
name: 'night',
style: {
body: {
color: '#fff',
background: '#000',
},
},
},
{
name: 'gold',
style: {
body: {
color: '#000',
background: 'rgb(238, 232, 170)', //241.236,226
},
},
},
],
defaultTheme: 0,
bookAvailable: false,
navigation: null,
rendition: '',
themes: '',
locations: ''
}
},
onReady() {},
onLoad(option) {
// #ifndef MP-WEIXIN
this.commonUrl = JSON.parse(option.url)
// #endif
// #ifdef MP-WEIXIN
this.commonUrl = option.url
// #endif
// #ifdef H5
this.showEpub()
// #endif
// #ifndef H5
this.$lizhao.epub.show({
url: this.commonUrl
})
// #endif
},
methods: {
// #ifdef H5
// 电子书的解析和渲染
showEpub() {
// 生成book,Rendition,
let DOWNLOAD_URL = this.commonUrl
this.book = new Epub(DOWNLOAD_URL)
this.rendition = this.book.renderTo('read', {
width: window.innerWidth,
height: window.innerHeight,
})
// 通过Rendition.display渲染电子书
this.rendition.display()
// 获取Theme对象
this.themes = this.rendition.themes
// 设置默认字体
this.setFontSize(this.defaultFontSize)
// this.themes.register(name,styles)
this.registerTheme()
// this.themes.select(name)
this.setTheme(this.defaultTheme)
// 获取locations对象 epubjs的钩子函数实现
this.book.ready
.then(() => {
this.navigation = this.book.navigation
return this.book.locations.generate()
})
.then((result) => {
// console.log(result);
this.locations = this.book.locations
this.bookAvailable = true
})
},
prevPage() {
// Rendition.prev
if (this.rendition) {
this.rendition.prev().then(() => {
this.showProgress()
})
}
},
nextPage() {
// Rendition.next
if (this.rendition) {
this.rendition.next().then(() => {
this.showProgress()
})
}
},
getCurrentLocation() {
if (this.rendition) {
this.showProgress()
}
},
// 进度条跳转更新
showProgress() {
// 获取当前位置信息
const currentLoction = this.rendition.currentLocation()
// 获取当前位置进度百分比
this.progress = this.bookAvailable ? this.locations.percentageFromCfi(currentLoction.start.cfi) : 0
// 转化成0-100的数字
this.progress = Math.round(this.progress * 100)
},
// 根据链接跳转到指定位置
jumpTo(href) {
this.rendition.display(href).then(() => {
this.showProgress()
})
this.hideTitleAndMenu()
},
hideTitleAndMenu() {
// 隐藏标题栏和菜单栏
this.ifTitleAndMenuShow = false
// 隐藏菜单栏弹出的设置栏
this.$refs.menuBar.hideSetting()
// 隐藏目录
this.$refs.menuBar.hideContent()
},
onProgressChange(progress) {
const percentage = progress / 100
const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
this.rendition.display(location)
},
setTheme(index) {
this.themes.select(this.themeList[index].name)
this.defaultTheme = index
},
registerTheme() {
this.themeList.forEach((theme) => {
this.themes.register(theme.name, theme.style)
})
},
setFontSize(fontSize) {
this.defaultFontSize = fontSize
if (this.themes) {
this.themes.fontSize(fontSize + 'px')
}
},
toggleTitleAndMenu() {
this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
if (!this.ifTitleAndMenuShow) {
this.$refs.menuBar.hideSetting()
}
},
// #endif
}
}
</script>
<style scoped lang="scss">
.ebook {
position: relative;
.read-wrapper {
.mask {
position: absolute;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
.left {
flex: 0 0 px2rem(60);
background: url('@/components/peter-dianzan/black-big-like-icon.png') no-repeat center;
cursor: pointer;
width: 120rpx;
}
.center {
flex: 1;
cursor: pointer;
}
.right {
width: 120rpx;
flex: 0 0 px2rem(60);
background: url('@/components/yz-audio/static/playbtn.png') no-repeat center;
cursor: pointer;
}
}
}
}
</style>epub.vue
<template>
<transition name="slide-right">
<div class="content">
<div class="content-wrapper" :style="{'background-image':'url('+$staticUrl+'static/dzs.png'+')'}" v-if="bookAvailable">
<div class="content-item" v-for="(item, index) in navigation.toc" :key="index" @click="jumpTo(item.href)">
<span class="text">{{ item.label }}</span>
</div>
</div>
<div class="empty" v-else>加载中...</div>
</div>
</transition>
</template>
<script>
export default {
props: {
ifShowContent: Boolean,
navigation: Object,
bookAvailable: Boolean,
},
methods: {
jumpTo(target) {
this.$emit('jumpTo', target)
},
},
}
</script>
<style scoped lang="scss">
.content {
position: absolute;
top: 0;
left: 0;
z-index: 12;
width: 80%;
height: 100%;
background: white;
.content-wrapper {
padding: 20rpx;
width: calc(100% - 40rpx);
height: 100%;
overflow: auto;
.content-item {
padding: 20rpx 15rpx;
border-bottom: 1rpx solid #DFD6C6;
.text {
// font-size: px2rem(14);
font-size: 24rpx;
color: #272727;
}
}
}
.empty {
width: 100%;
height: 100%;
// @include center;
font-size: px2rem(16);
color: #333;
}
}
</style>
Content.vue
<template>
<div class="menu-bar">
<transition name="slide-up">
<div class="menu-wrapper" :class="{ 'hide-box-shadow': ifSettingShow || !ifTitleAndMenuShow }"
v-show="ifTitleAndMenuShow">
<div class="icon-wrapper">
<!-- <u-icon name="list" color="#2979ff" @click="showSetting(3)" size="28"></u-icon> -->
<u-button shape="circle" @click="prevPage()">上一章</u-button>
<!-- <span class="icon-menu icon" @click="showSetting(3)"></span> -->
</div>
<div class="icon-wrapper">
<!-- <span class="icon-progress icon" @click="showSetting(2)"></span> -->
<u-button shape="circle" @click="showSetting(3)">目录</u-button>
<!-- <u-icon name="list" color="#2979ff" @click="showSetting(2)" size="28"></u-icon> -->
</div>
<div class="icon-wrapper">
<!-- <span class="icon-bright icon" @click="showSetting(1)"></span> -->
<!-- <u-icon name="list" color="#2979ff" @click="showSetting(1)" size="28"></u-icon> -->
<u-button type="primary" @click="nextPage()" shape="circle">下一章</u-button>
</div>
<!-- <div class="icon-wrapper">
<span class="icon-a icon" @click="showSetting(0)">A</span>
</div> -->
</div>
</transition>
<transition name="slide-up">
<div class="setting-wrapper" v-show="ifSettingShow">
<div class="setting-font-size" v-if="showTag === 0">
<div class="preview" :style="{ fontSize: fontSizeList[0].fontSize + 'px' }">A</div>
<div class="select">
<div class="select-wrapper" v-for="(item, index) in fontSizeList" :key="index"
@click="setFontSize(item.fontSize)">
<div class="line"></div>
<div class="point-wrapper">
<div class="point" v-show="defaultFontSize === item.fontSize">
<div class="small-point"></div>
</div>
</div>
<div class="line"></div>
</div>
</div>
<div class="preview" :style="{ fontSize: fontSizeList[fontSizeList.length - 1].fontSize + 'px' }">A
</div>
</div>
<div class="setting-theme" v-else-if="showTag == 1">
<div class="setting-theme-item" v-for="(item, index) in themeList" :key="index"
@click="setTheme(index)">
<div class="preview" :style="{ background: item.style.body.background }"
:class="{ 'no-border': item.style.body.background !== '#fff' }"></div>
<div class="text" :class="{ selected: index == defaultTheme }">{{ item.name }}</div>
</div>
</div>
<div class="setting-progress" v-else-if="showTag == 2">
<div class="progress-wrapper">
<u-slider class="progress" v-model="progress" :value="progress" :disabled="!bookAvailable"
blockColor='#FFFFFF' ref="progress" max="100" @change="onProgressChange"
@input="onProgressInput" min="0"></u-slider>
<!-- <input
class="progress"
type="range"
max="100"
min="0"
step="1"
@change="onProgressChange($event.target.value)"
@input="onProgressInput($event.target.value)"
:value="progress"
:disabled="!bookAvailable"
ref="progress"
/> -->
</div>
<div class="text-wrapper">
<span>{{ bookAvailable ? progress + '%' : '加载中...' }}</span>
</div>
</div>
</div>
</transition>
<content-view :ifShowContent="ifShowContent" v-show="ifShowContent" :navigation="navigation"
:bookAvailable="bookAvailable" @jumpTo="jumpTo">
</content-view>
<transition name="fade">
<div class="content-mask" v-show="ifShowContent" @click="hideContent"></div>
</transition>
</div>
</template>
<script>
import ContentView from '@/components/epub/Content.vue'
export default {
components: {
ContentView,
},
props: {
ifTitleAndMenuShow: {
type: Boolean,
default: false,
},
fontSizeList: Array,
defaultFontSize: Number,
themeList: Array,
defaultTheme: Number,
bookAvailable: {
type: Boolean,
default: false,
},
navigation: Object,
parentProgress: Number,
},
data() {
return {
ifSettingShow: false,
showTag: 0,
progress: 0,
ifShowContent: false,
}
},
watch: {
bookAvailable: {
handler: function() {
this.getCurrentLocation()
},
},
parentProgress: {
handler: function(value) {
this.progress = value
if (this.bookAvailable && this.$refs.progress) {
this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
}
},
deep: true,
},
},
methods: {
prevPage() {
this.$emit('prevPage')
},
nextPage() {
this.$emit('nextPage')
},
getCurrentLocation() {
this.$emit('getCurrentLocation')
},
hideContent() {
this.ifShowContent = false
},
jumpTo(target) {
this.$emit('jumpTo', target)
},
// 拖动进度条触发事件
onProgressInput(progress) {
this.progress = progress
this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
},
// 进度条松开后触发事件，根据进度条数值跳转到指定位置
onProgressChange(progress) {
this.$emit('onProgressChange', progress)
},
setTheme(index) {
this.$emit('setTheme', index)
},
setFontSize(fontSize) {
this.$emit('setFontSize', fontSize)
},
showSetting(tag) {
this.showTag = tag
if (this.showTag === 3) {
this.ifSettingShow = false
this.ifShowContent = true
} else {
this.ifSettingShow = true
}
},
hideSetting() {
this.ifSettingShow = false
},
},
}
</script>
<style scoped lang="scss">
// @import '../../../assets/styles/global';
.menu-bar {
.menu-wrapper {
position: absolute;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
z-index: 10;
background: white;
box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, 0.15);
flex-direction: row;
align-items: center;
&.hide-box-shadow {
box-shadow: none;
}
.icon-wrapper {
flex: 1;
padding: 0 10rpx;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
// @include center;
.icon-a {
font-size: px2rem(18);
}
}
}
.setting-wrapper {
position: absolute;
bottom: px2rem(48);
left: 0;
z-index: 11;
width: 100%;
height: 160rpx;
height: px2rem(60);
bottom: 100rpx;
background: #fff;
box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, 0.15);
.setting-font-size {
display: flex;
height: 100%;
.preview {
flex: 0 0 px2rem(40);
// @include center;
}
.select {
display: flex;
flex: 1;
.select-wrapper {
flex: 1;
display: flex;
align-items: center;
&:first-child {
.line {
&:first-child {
border-top: none;
}
}
}
&:last-child {
.line {
&:last-child {
border-top: none;
}
}
}
.line {
flex: 1;
height: 0;
border-top: px2rem(1) solid #ccc;
}
.point-wrapper {
position: relative;
flex: 0 0 0;
width: 0;
height: px2rem(7);
border-left: px2rem(1) solid #ccc;
.point {
position: absolute;
top: px2rem(-8);
left: px2rem(-10);
width: px2rem(20);
height: px2rem(20);
border-radius: 50%;
background: white;
border: px2rem(1) solid #ccc;
box-shadow: 0 px2rem(4) px2rem(4) rgba(0, 0, 0, 0.15);
// @include center;
.small-point {
width: px2rem(5);
height: px2rem(5);
background: black;
border-radius: 50%;
}
}
}
}
}
}
.setting-theme {
height: 100%;
display: flex;
.setting-theme-item {
flex: 1;
display: flex;
flex-direction: column;
padding: px2rem(5);
box-sizing: border-box;
.preview {
flex: 1;
border: px2rem(1) solid #ccc;
box-sizing: border-box;
&.no-border {
border: none;
}
}
.text {
flex: 0 0 px2rem(20);
font-size: px2rem(14);
color: #ccc;
// @include center;
&.selected {
color: #333;
}
}
}
}
.setting-progress {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
height: 120rpx;
bottom: 220rpx;
.progress-wrapper {
width: 100%;
height: 100%;
// @include center;
padding: 0 px2rem(30);
box-sizing: border-box;
.progress {
width: 100%;
-webkit-appearance: none;
height: px2rem(2);
// background: -webkit-linear-gradient(#999, #999) no-repeat, #ddd;
background-size: 0 100%;
&:focus {
outline: none;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: px2rem(20);
width: px2rem(20);
border-radius: 50%;
background: white;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
border: px2rem(1) solid #ddd;
}
}
}
.text-wrapper {
position: absolute;
width: 100%;
bottom: 0;
color: #333;
font-size: px2rem(12);
span {
// @include center;
}
}
}
}
.content-mask {
position: absolute;
top: 0;
left: 0;
z-index: 11;
display: flex;
width: 100%;
height: 100%;
background: rgba(51, 51, 51, 0.8);
}
}
</style>MenuBar.vue
结构
直接使用
2151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
