<div class="pdf" v-show="fileType === 'pdf'"><div style="height: 0.8rem;"></div><p class="arrow" style="font-size: 18px"><!-- // 上一頁(yè) --><span@click="changePdfPage(0)"class="turn":class="{grey: currentPage==1}"style="cursor: pointer;margin-left: 1rem;">上一頁(yè)</span>{{currentPage}} / {{pageCount}}<!-- // 下一頁(yè) --><span@click="changePdfPage(1)"class="turn":class="{grey: currentPage===pageCount}"style="cursor: pointer;">下一頁(yè)</span></p><pdfstyle="width: 90%":src="preUrl":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"></pdf></div>

methods: {
// 改變PDF頁(yè)碼,val傳過(guò)來(lái)區(qū)分上一頁(yè)下一頁(yè)的值,0上一頁(yè),1下一頁(yè)
changePdfPage(val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage–
// console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
// console.log(this.currentPage)
}
},

// pdf加載時(shí) loadPdfHandler(e) {console.log(e)this.currentPage = 1 // 加載的時(shí)候先加載第一頁(yè) },

}

總結(jié)

以上是生活随笔為你收集整理的vue-pdf分页预览的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。