Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 600c176c by sunnyfan
Options

add

1 parent a854b3c8
Inline Side-by-side
Showing 4 changed files with 18 additions and 110 deletions
package-lock.json
...@@ -12469,6 +12469,14 @@ ...@@ -12469,6 +12469,14 @@
"worker-loader": "^2.0.0" "worker-loader": "^2.0.0"
} }
}, },
"vue-pdf-app": {
"version": "2.1.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/vue-pdf-app/-/vue-pdf-app-2.1.0.tgz",
"integrity": "sha512-eQUeDBdvwxBUvnrojBY+jfaKmwEVwHNC7be6eHreG1yxPSvPFoBzFa93411u15/Ze4NmZCIJKXEWvFz/RM6lxQ==",
"requires": {
"vue": "^2.6.11"
}
},
"vue-resize-sensor": { "vue-resize-sensor": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz", "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
......
package.json
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-i18n": "^8.24.3", "vue-i18n": "^8.24.3",
"vue-pdf": "^4.2.0", "vue-pdf": "^4.2.0",
"vue-pdf-app": "^2.1.0",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0", "vuex": "^3.4.0",
"vuex-persist": "^3.1.3" "vuex-persist": "^3.1.3"
......
src/assets/css/sprite.less
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -2050px -737px; } .icon-icon-arrow-right { width: 10px; height: 18px; background-position: -2050px -737px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -2028px -1225px; } .icon-icon-classify { width: 30px; height: 30px; background-position: -2028px -1225px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1696px -1281px; } .icon-icon-clock { width: 30px; height: 30px; background-position: -1696px -1281px; }
.icon-icon-today-hot { width: 74px; height: 74px; background-position: -1696px -981px; }
.icon-join-member { width: 90px; height: 90px; background-position: -1954px -526px; } .icon-join-member { width: 90px; height: 90px; background-position: -1954px -526px; }
.icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; } .icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; }
.icon-logo { width: 224px; height: 224px; background-position: -1696px -737px; } .icon-logo { width: 224px; height: 224px; background-position: -1696px -737px; }
...@@ -45,4 +46,3 @@ ...@@ -45,4 +46,3 @@
.icon-user { width: 36px; height: 36px; background-position: -1864px -1225px; } .icon-user { width: 36px; height: 36px; background-position: -1864px -1225px; }
.icon-verification { width: 36px; height: 36px; background-position: -1920px -1225px; } .icon-verification { width: 36px; height: 36px; background-position: -1920px -1225px; }
.icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; } .icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; }
\ No newline at end of file \ No newline at end of file
.icon-icon-today-hot { width: 74px; height: 74px; background-position: -1696px -981px; }
\ No newline at end of file \ No newline at end of file
src/views/pdf/two.vue
<template> <template>
<div class="pdf_container"> <div class="pdf_container">
<NafmHeader navClass="nafmii-head-bg3" title="详情页面"> <NafmHeader navClass="nafmii-head-bg3" title="详情页面">
<template #bottom>
<div class="header">
<div class="header_left">
<span class="pre" @click="handlePre">上一页</span>
<span class="next" @click="handleNext">下一页</span>
</div>
<div class="center">
<input type="text" v-model.number="inputValue" class="inputClass" @change="handleChange"> <span>/ {{pageCount}}</span>
</div>
<div class="header_right">
<span class="pre" @click="handleScaleBig">放大</span>
<span class="pre" @click="handleScaleSmall">缩小</span>
<span class="next" @click="handleReset">重置</span>
</div>
</div>
</template>
</NafmHeader> </NafmHeader>
<Pdf v-for="(i,index) in numPages" :key="i" :src="src" :ref="`wrapper${index}`" :page="i" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" /> <vue-pdf-app :pdf="fileUrl"></vue-pdf-app>
</div> </div>
</template> </template>
<script> <script>
import Pdf from 'vue-pdf' import VuePdfApp from "vue-pdf-app";
import "vue-pdf-app/dist/icons/main.css";
export default { export default {
components: { components:{
Pdf VuePdfApp
}, },
data() { data() {
return { return {
loading: false,
inputValue: 1, inputValue: 1,
currentPage: 0, currentPage: 0,
pageCount: 0, pageCount: 0,
fileUrl: `${window.location.origin}/study.pdf`, fileUrl: 'study.pdf',
numPages: undefined, numPages: undefined,
src: '', src: '',
scale: 100, scale: 100,
} }
}, },
created() {
this.src = Pdf.createLoadingTask(this.fileUrl)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages
})
},
mounted() {
// this.src.promise.then(pdf => {
// this.numPages = pdf.numPages
// })
console.log('---', this.currentPage)
},
methods: {
onLoad(val) {
this.currentPage = val || 1
this.inputValue = this.currentPage
// this.src.then(pdf => { this.currentPage = pdf.numPages; });
},
handlePre() {
if (this.currentPage == 1) {
Toast('已在第一页')
return
} else {
this.currentPage--
}
this.inputValue = this.currentPage
},
handleNext() {
if (this.currentPage == this.pageCount) {
Toast('已在末页')
return
} else {
this.currentPage++
}
this.inputValue = this.currentPage
},
pageLoad(val) {
console.log(val, this.currentPage);
},
handleChange(e) {
console.log('val-->', val)
const val = e.target.value
if (val > this.pageCount) {
Toast('输入值不能大于总页数')
this.inputValue = ''
return
}
if (val < 1 || val == "" || val == '') {
Toast('输入值小于了最小页数')
this.inputValue = ''
return
}
try {
console.log('val', val);
this.currentPage = Number(val)
} catch (e) {
console.log(e);
}
},
handleScaleBig() {
const canvas = document.querySelector('canvas')
this.scale += 10;
// canvas.style.width = parseInt(this.scale) + "%";
canvas.style.width = parseInt(this.scale) + "%";
canvas.style.height = parseInt(100) + "%";
},
handleScaleSmall() {
const canvas = document.querySelector('canvas')
if (this.scale == 100) {
return;
}
this.scale += -10;
canvas.style.width = parseInt(this.scale) + "%";
canvas.style.height = parseInt(100) + "%";
},
handleReset() {
const canvas = document.querySelector('canvas')
canvas.style.width = parseInt(100) + "%";
canvas.style.height = parseInt(100) + "%";
this.currentPage = 1
this.inputValue = 1
}
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!