-
使用离线模式生成脚手架 --offline
在github下载模版
查看全部 -
课程总结。。
查看全部 -
transition动画原理图
查看全部 -
transition动画原理
查看全部 -
epubjs的核心工作原理解析
查看全部 -
viewport 配置
查看全部 -
教程环境版本：
node：8.9.0
npm：5.5.1
vue：2.9.3
查看全部 -
开发准备，搭建Vue脚手架
查看全部 -
阅读器开发流程
查看全部 -
电子书工作原理
查看全部 -
涉及的知识点
查看全部 -
开发流程这里不是太明白
查看全部 -
<template>
<div class='ebook'>
<transition name="slide-down">
<div class="title-wrapper" v-show="ifTitleAndMenuShow">
<div class="left">
<span class="icon-back icon"></span>
</div>
<div class="right">
<div class="icon-wrapper">
<span class="icon-cart icon"></span>
</div>
<div class="icon-wrapper">
<span class="icon-person icon"></span>
</div>
<div class="icon-wrapper">
<span class="icon-more icon"></span>
</div>
</div>
</div>
</transition>
<div class="read-wrapper">
<div id="read">
<div class="mask">
<div class="left" @click="prevPage"></div>
<div class="center" @click="toggleTitleAndMenuShow"></div>
<div class="right" @click="nextPage"></div>
</div>
</div>
</div>
<transition name='slide-up'>
<div class="menu-wrapper" v-show="ifTitleAndMenuShow">
<div class="icon-wrapper">
<span class="icon-menu icon"></span>
</div>
<div class="icon-wrapper">
<span class="icon-progress icon"></span>
</div>
<div class="icon-wrapper">
<span class="icon-bright icon"></span>
</div>
<div class="icon-wrapper">
<span class="icon-a icon">A</span>
</div>
</div>
</transition>
</div>
</template>
<script>
import Epub from "epubjs";
const DOWNLOAD_URL = "/static/2018_Book_AgileProcessesInSoftwareEngine.epub";
global.ePub = Epub;
export default {
data() {
return {
ifTitleAndMenuShow: false
};
},
methods: {
toggleTitleAndMenuShow() {
this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow;
},
prevPage() {
if (this.rendition) {
this.rendition.prev();
}
},
nextPage() {
if (this.rendition) {
this.rendition.next();
}
},
//电子书解析和渲染
showEpub() {
//生存Book
this.book = new Epub(DOWNLOAD_URL);
//生成Rendition
this.rendition = this.book.renderTo("read", {
width: window.innerWidth,
height: window.innerHeight
});
//通过Rendition.display渲染电子书
this.rendition.display();
}
},
mounted() {
this.showEpub();
}
};
</script>
<style lang='scss' scoped>
@import "assets/styles/global";
.ebook {
position: relative;
.title-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 101;
display: flex;
width: 100%;
height: px2rem(48);
background: white;
box-shadow: 0 px2rem(8) px2rem(8) rgba(0, 0, 0, 0.15);
.left {
flex: 0 0 px2rem(60);
@include center;
}
.right {
flex: 1;
display: flex;
justify-content: flex-end;
.icon-wrapper {
@include center;
flex: 0 0 px2rem(40);
.icon-cart {
font-size: px2rem(22);
}
}
}
}
.read-wrapper {
.mask {
position: absolute;
top: 0;
left: 0;
z-index: 100;
display: flex;
width: 100%;
height: 100%;
.left {
flex: 0 0 px2rem(100);
}
.center {
flex: 1;
}
.right {
flex: 0 0 px2rem(100);
}
}
}
.menu-wrapper {
position: absolute;
bottom: 0;
left: 0;
z-index: 101;
display: flex;
width: 100%;
height: px2rem(48);
background: white;
box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, 0.15);
.icon-wrapper {
flex: 1;
@include center;
.icon-progress {
font-size: px2rem(28);
}
.icon-bright {
font-size: px2rem(24);
}
}
}
}
</style>
.slide-up-center,
.slide-up-leave-to {
transform: translate3d(0, 100%, 0);
}
.slide-down-enter-to,
.slide-down-leave,
.slide-up-center-to,
.slide-up-leave {
transform: translate3d(0, 0, 0);
}
.slide-down-enter-active,
.slide-down-leave-active
.slide-up-center-active,
.slide-up-leave-to-active {
transform: all 0.3s linear;
}
.slide-down-enter,
.slide-down-leave-to {
transform: translate3d(0, -100%, 0);
}
查看全部 -
this.navigation = this.book.navigation
查看全部 -
// 初始化 epubjs 的 location 对象 this.book.ready.then(() => { return this.book.loacations.generate() }).then(res => { console.log(res) this.locations = this.book.loacations }) // 生成 epubjs 的 location 的 方法 this.locations.cfiFromPercentage(percentage)查看全部
举报