From b36d06e85eff7302df612d19ff0810e1a3b304d5 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期三, 12 六月 2024 11:07:15 +0800
Subject: [PATCH] 优化
---
src/components/pdfview/index.vue | 85 ++++++++++++++++++++++++------------------
src/books/sportsAndHealth/view/components/testDynaicTable.vue | 12 +++---
src/books/sportsAndHealth/view/components/index.vue | 2
3 files changed, 56 insertions(+), 43 deletions(-)
diff --git a/src/books/sportsAndHealth/view/components/index.vue b/src/books/sportsAndHealth/view/components/index.vue
index 8b6a584..b8d881e 100644
--- a/src/books/sportsAndHealth/view/components/index.vue
+++ b/src/books/sportsAndHealth/view/components/index.vue
@@ -188,7 +188,7 @@
},
mounted() {
// 榛樿鍔犺浇绔犺妭
- this.showCatalogList = [1];
+ this.showCatalogList = [3];
// 婊氬姩鐩戝惉鑺傛祦
this.throttledScrollHandler = _.throttle(
this.scrollFun,
diff --git a/src/books/sportsAndHealth/view/components/testDynaicTable.vue b/src/books/sportsAndHealth/view/components/testDynaicTable.vue
index e9a1656..d99748c 100644
--- a/src/books/sportsAndHealth/view/components/testDynaicTable.vue
+++ b/src/books/sportsAndHealth/view/components/testDynaicTable.vue
@@ -114,22 +114,22 @@
</div>
</div>
</div>
- <!-- <div class="page-box" page="226">
+ <div class="page-box" page="226">
<div v-if="showPageList.indexOf(226)>-1">
<div class="bodystyle">
<pdfView :md5="md5"></pdfView>
</div>
</div>
- </div> -->
+ </div>
</div>
</template>
<script>
-// import pdfView from '@/components/pdfview'
+import pdfView from '@/components/pdfview'
export default {
name: "testD",
- // components:{
- // pdfView
- // },
+ components:{
+ pdfView
+ },
props: {
showPageList: {
type: Array,
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index fa18ac8..72522a5 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,10 +1,11 @@
<template>
- <div class="imgbox">
+ <div ref="imageBox" class="imageBox">
<img
+ id="image"
ref="image"
- :onLoad="initFun"
- :onDragStart="dragStart"
- :onWheel="handleScroll"
+ @onload="initFun"
+ @ondragstart="dragStart"
+ @onwheel="handleScroll"
:src="currentPageSrc"
alt=""
/>
@@ -54,37 +55,44 @@
created() {
this.getFileInfo();
},
+ mounted(){
+ // this.initFun()
+ },
methods: {
initFun() {
- // 鍒濆鍖栨嫋鎷�
- let image = this.refs.image;
- let imageBox = this.refs.imageBox;
- let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
- image.style.left = initLeft + "px";
- image.style.top = 0 + "px";
- let canMove = false;
- let offsetX, offsetY, oldLeft, oldTop;
- image.onmousedown = function (e) {
- canMove = true;
- offsetX = e.x;
- offsetY = e.y;
- oldLeft = parseFloat(image.style.left.split("px")[0]);
- oldTop = parseFloat(image.style.top.split("px")[0]);
- };
- imageBox.onmousemove = function (e) {
- if (canMove == true) {
- let left = e.clientX - offsetX;
- let top = e.clientY - offsetY;
- image.style.left = oldLeft + left + "px";
- image.style.top = oldTop + top + "px";
+ // 鍒濆鍖栨嫋鎷�
+ let image = this.$refs.image;
+ console.log(this,8989);
+ if (image) {
+ let imageBox = this.$refs.imageBox;
+ let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
+ image.style.left = 0 + "px";
+ image.style.top = 0 + "px";
+ let canMove = false;
+ let offsetX, offsetY, oldLeft, oldTop;
+ image.onmousedown = function (e) {
+ canMove = true;
+ offsetX = e.x;
+ offsetY = e.y;
+ oldLeft = parseFloat(image.style.left.split("px")[0]);
+ oldTop = parseFloat(image.style.top.split("px")[0]);
+ };
+ imageBox.onmousemove = function (e) {
+ if (canMove == true) {
+ let left = e.clientX - offsetX;
+ let top = e.clientY - offsetY;
+ image.style.left = oldLeft + left + "px";
+ image.style.top = oldTop + top + "px";
+ }
+ };
+ image.onmouseup = function () {
+ canMove = false;
+ };
+ this.fileLoading = false;
}
- };
- image.onmouseup = function () {
- canMove = false;
- };
- this.fileLoading = false;
},
dragStart(e) {
+ console.log(e,'dragStart')
if (e && e.preventDefault) {
e.preventDefault();
} else {
@@ -92,17 +100,18 @@
}
},
handleScroll(e) {
+ console.log(e,'handleScroll')
if (e.nativeEvent.deltaY <= 0) {
if (this.zoom < 3) {
let newZoom = this.zoom + 0.1;
this.zoom = newZoom;
- this.refs.image.style.height = newZoom * 100 + "%";
+ this.$refs.image.style.height = newZoom * 100 + "%";
}
} else {
if (this.zoom > 0.5) {
let newZoom = this.zoom - 0.1;
this.zoom = newZoom;
- this.refs.image.style.height = newZoom * 100 + "%";
+ this.$refs.image.style.height = newZoom * 100 + "%";
}
}
},
@@ -134,12 +143,16 @@
};
</script>
<style scoped lang="less">
-.imgbox {
+.imageBox {
width: 100%;
- height: 100%;
- background-color: aquamarine;
+ height: 300px;
+ overflow: auto;
+ position: relative;
img {
- width: 100%;
+ position: absolute;
+ width: auto;
+ height: 100%;
+ transition: transform 0.5s, width 0.3s, height 0.3s;
}
}
</style>
--
Gitblit v1.9.1