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;
}