parent
640ae51cdc
commit
712e654b71
6 changed files with 279 additions and 10 deletions
@ -0,0 +1,124 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-dialog |
||||||
|
custom-class="pdf-dia" |
||||||
|
:close-on-click-modal="false" |
||||||
|
:visible.sync="visible" |
||||||
|
@close="closePdf" |
||||||
|
:fullscreen="true" |
||||||
|
:modal="false" |
||||||
|
:append-to-body="true"> |
||||||
|
<div> |
||||||
|
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePdf"><i class="el-dialog__close el-icon el-icon-close"></i></button> |
||||||
|
<div class="pdf"> |
||||||
|
<p class="arrow"> |
||||||
|
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span> |
||||||
|
{{currentPage}} / {{pageCount}} |
||||||
|
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span> |
||||||
|
</p> |
||||||
|
<pdf |
||||||
|
class="pdf-wrap" |
||||||
|
:src="src" |
||||||
|
:page="currentPage" |
||||||
|
@num-pages="pageCount=$event" |
||||||
|
@page-loaded="currentPage=$event" |
||||||
|
@loaded="loadPdfHandler" |
||||||
|
> |
||||||
|
</pdf> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pdf from "vue-pdf"; |
||||||
|
export default { |
||||||
|
props: ['visible','src'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pdfVisible: false, |
||||||
|
pdfSrc: '', |
||||||
|
currentPage: 0, |
||||||
|
pageCount: 0, |
||||||
|
fileType: 'pdf', |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { pdf }, |
||||||
|
mounted(){ |
||||||
|
this.addEvent() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
closePdf(){ |
||||||
|
this.$emit('update:visible',false) |
||||||
|
this.$emit('update:src','') |
||||||
|
this.currentPage = 1 |
||||||
|
}, |
||||||
|
changePdfPage (val) { |
||||||
|
if (val === 0 && this.currentPage > 1) { |
||||||
|
this.currentPage-- |
||||||
|
} |
||||||
|
if (val === 1 && this.currentPage < this.pageCount) { |
||||||
|
this.currentPage++ |
||||||
|
} |
||||||
|
}, |
||||||
|
loadPdfHandler (e) { |
||||||
|
this.currentPage = 1 |
||||||
|
}, |
||||||
|
addEvent(){ |
||||||
|
document.onkeydown = e => { |
||||||
|
let key = window.event.keyCode |
||||||
|
if(key == 37){ |
||||||
|
this.changePdfPage(0) |
||||||
|
}else if(key == 39){ |
||||||
|
this.changePdfPage(1) |
||||||
|
} |
||||||
|
} |
||||||
|
this.$once('hook:beforeDestroy',() => { |
||||||
|
document.onkeydown = null |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
/deep/.pdf-dia{ |
||||||
|
border-radius: 0 !important; |
||||||
|
.el-dialog__header{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.el-dialog__body{ |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.el-dialog__headerbtn{ |
||||||
|
top: 10px; |
||||||
|
.el-dialog__close{ |
||||||
|
color: #fff; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pdf{ |
||||||
|
.arrow{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
padding: 10px 0; |
||||||
|
font-size: 16px; |
||||||
|
color: #fff; |
||||||
|
background-color: #333; |
||||||
|
.turn{ |
||||||
|
margin: 0 10px; |
||||||
|
font-size: 18px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.pdf-wrap{ |
||||||
|
height: calc(100vh - 45px); |
||||||
|
margin: 0 auto; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue