168 lines
3.8 KiB
Vue
168 lines
3.8 KiB
Vue
<template>
|
||
<view class="pdf-page">
|
||
<view class="pdf-wrap" :style="{'height':viewHeight}">
|
||
<view ref="pdfRef" id="pdfView"></view>
|
||
</view>
|
||
<view v-if="showBottom" class="pdf-btn-group">
|
||
<slot>
|
||
<button class="btn-readed" size="mini" @click="handleComplete"
|
||
:disabled="btnDisabled">{{showTimer ? countTimer<=1 ? '':'('+countTimer+'s)':''}}我已阅读</button>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Pdfh5 from "pdfh5";
|
||
import "pdfh5/css/pdfh5.css";
|
||
export default {
|
||
name: "u-pdf",
|
||
props: {
|
||
url: {
|
||
type: String,
|
||
require: true
|
||
},
|
||
viewHeight: {
|
||
type: String,
|
||
default: "100%"
|
||
},
|
||
showBottom: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
options: {
|
||
type: Object,
|
||
default: () => ({
|
||
cMapUrl: "https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",
|
||
lazy: false,
|
||
withCredentials: true,
|
||
// pdfLoaded:false,
|
||
renderType: "svg",
|
||
maxZoom: 3, //手势缩放最大倍数 默认3
|
||
scrollEnable: true, //是否允许pdf滚动
|
||
zoomEnable: true //是否允许pdf手势缩放
|
||
})
|
||
},
|
||
disabled:{
|
||
type:Boolean,
|
||
default:true
|
||
},
|
||
showTimer:Boolean
|
||
},
|
||
data() {
|
||
return {
|
||
totalNum: 0,
|
||
pdfh5: undefined,
|
||
countTimer:10,
|
||
timer:undefined,
|
||
btnDisabled:true
|
||
}
|
||
},
|
||
|
||
watch:{
|
||
disabled(n,o){
|
||
this.btnDisabled = this.disabled
|
||
},
|
||
showTimer(n,o){
|
||
console.log("showTimer ",n);
|
||
if(this.showTimer){
|
||
this.startCountDownTimer()
|
||
}
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.loadPdf()
|
||
})
|
||
},
|
||
|
||
// onPageScroll(scroll) {
|
||
// console.log(`onPageScroll ${scroll}`,scroll);
|
||
// },
|
||
|
||
// onReachBottom(scroll) {
|
||
// console.log(`onReachBottom 滚动到底部`);
|
||
// },
|
||
|
||
methods: {
|
||
handleComplete(){
|
||
this.$emit("onClickReader")
|
||
},
|
||
|
||
startCountDownTimer(){
|
||
this.timer= setInterval(()=>{
|
||
if(this.countTimer<=1){
|
||
this.btnDisabled=false
|
||
clearInterval(this.timer)
|
||
}else{
|
||
this.countTimer--
|
||
}
|
||
},1000)
|
||
},
|
||
|
||
loadPdf() {
|
||
if (!this.url) {
|
||
console.error("pdf url is null ");
|
||
return;
|
||
}
|
||
const opts = {
|
||
pdfurl: this.url,
|
||
...this.options
|
||
}
|
||
console.log(opts);
|
||
this.pdfh5 = new Pdfh5('#pdfView', opts);
|
||
// 准备加载pdf
|
||
this.pdfh5.on("ready", () => {
|
||
this.$emit("ready")
|
||
})
|
||
//pdf 监听完成事件
|
||
this.pdfh5.on("complete", (status, msg, time) => {
|
||
console.log(`PDF complete status=${status}, msg =${msg}`);
|
||
this.$emit("complete", { status, msg })
|
||
});
|
||
// pdf 滚动事件 Svg 方式不会执行此方法， 需要在page中监听 onReachBottom，onPageScroll
|
||
this.pdfh5.on("scroll", (scrollTop, currentNum) => {
|
||
console.log(`pdf scrollTop =${scrollTop} , currentNum =${currentNum}`);
|
||
this.$emit("scroll", { scrollTop, currentNum })
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import 'pdfh5/css/pdfh5.css';
|
||
|
||
.pdf-page {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.pdf-wrap {
|
||
width: 100%;
|
||
flex: 1;
|
||
}
|
||
|
||
.pdf-btn-group {
|
||
width: 100%;
|
||
border-top: 2rpx solid #F8F9FC;
|
||
height: 8%;
|
||
position: fixed;
|
||
bottom: -1rpx;
|
||
z-index: 999;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-readed {
|
||
background: #4E70F6;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
}
|
||
</style> |