mask
prevPage
nextPage
<template>
<div class="ebook">
<div class="read-wrapper">
<div id="read"></div>
<div class="mask">
<div class="left" @click="prevPage"></div>
<div class="center"></div>
<div class="right" @click="nextPage"></div>
</div>
</div>
</div>
</template>
<script>
import Epub from "epubjs";
const DOWNLOAD_URL = "/static/2018_Book_AgileProcessesInSoftwareEngine.epub";
export default {
data() {
return {
book: {},
rendition: {},
};
},
components: {},
computed: {},
mounted() {
this.showEpub();
},
methods: {
showEpub() {
// 生成book对象
this.book = new Epub(DOWNLOAD_URL);
// 生成rendition 对象
this.rendition = this.book.renderTo("read", {
width: window.innerWidth,
height: window.innerHeight,
});
// 渲染节点
this.rendition.display();
},
// 点击上一页
prevPage() {
if (this.rendition) {
this.rendition.prev();
}
},
// 点击下一页
nextPage() {
if (this.rendition) {
this.rendition.next();
}
},
},
};
</script>
<style lang="scss" scoped>
@import "assets/styles/global.scss";
.ebook {
position: relative;
.read-wrapper {
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: flex;
.left {
flex: 0 0 px2rem(100);
}
.center {
flex: 1;
}
.right {
flex: 0 0 px2rem(100);
}
}
}
}
</style>
@import "./reset.scss";
$fontSize: 37.5;
@function px2rem(px / $fontSize) + rem;
}
@mixin center() {
display: flex;
justify-content: center;
align-items: center;
}
