parent
1db6084af8
commit
24e44b22ca
18 changed files with 383 additions and 132 deletions
@ -0,0 +1,120 @@ |
||||
<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> |
||||
@ -1,17 +0,0 @@ |
||||
/** |
||||
* 试卷 |
||||
* */ |
||||
export default { |
||||
namespaced: true, |
||||
state: { |
||||
form: {}, |
||||
}, |
||||
mutations: { |
||||
setForm: (state, val) => { |
||||
state.form = val |
||||
}, |
||||
}, |
||||
actions: { |
||||
|
||||
} |
||||
}; |
||||
Loading…
Reference in new issue