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