-
课程总结。。
查看全部 -
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)查看全部
举报