代码语言：javascript复制
<template>
<div class="moduleIntro">
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left" size="small" @click="prePage">上一页</el-button>
<el-button type="primary" size="small" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<div style="margin-top: 10px; color: #409EFF; text-align: center">{{ currentPage }} / {{ pageCountNum }}</div>
<pdf
:page="currentPage"
:src="pdfUrl"
@progress="loadedRatio = $event"
@num-pages="pageCountNum = $event"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'moduleIntro',
components: {
pdf
},
data(){
return{
currentPage: 1,
pageCountNum: 0, //# 总页数
loadedRatio: 0, //# 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
pdfUrl:'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
}
},
methods:{
// 上一页
prePage() {
let page = this.currentPage
page = page > 1 ? page - 1 : this.pageCountNum
this.currentPage = page
},
// 下一页
nextPage() {
let page = this.currentPage
page = page < this.pageCountNum ? page 1 : 1
this.currentPage = page
}
}
}
</script>
