优化

unknown

2024-06-12 b36d06e85eff7302df612d19ff0810e1a3b304d5

优化

 src/books/sportsAndHealth/view/components/index.vue

@@ -188,7 +188,7 @@
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [1];
    this.showCatalogList = [3];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,

 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,

 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,13 +55,18 @@
  created() {
    this.getFileInfo();
  },
  mounted(){
    // this.initFun()
  },
  methods: {
    initFun() {
      // 初始化拖拽
      let image = this.refs.image;
      let imageBox = this.refs.imageBox;
        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 = initLeft + "px";
          image.style.left = 0 + "px";
      image.style.top = 0 + "px";
      let canMove = false;
      let offsetX, offsetY, oldLeft, oldTop;
@@ -83,8 +89,10 @@
        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>