查看大图：图片可以缩放，可以拖拽

<template>
  <!-- 该页面用于“查看大图”，只放一个图片；图片可以缩放，可以拖拽 
  encodeURIComponent("https://www.baidu.com/");  
  http://localhost:8080/showbigimg/参数

  eg: http://localhost:8080/showbigimg/http%3A%2F%2Ft.sciencemate.com%2Fpublic%2Fupload%2Ffiles%2Fmeeting%2F202109%2Fothers0320210915104430.jpg
  -->

  <div @mousewheel="mousewheel" @mousemove="mouseMove">
    <img
      ref="image"
      :src="imageurl"
      alt=""
      @mousedown.prevent="mouseDown"
      @mouseup="mouseUp"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageurl: "",
      img: null,
      params: {
        //用于计算图片的缩放，位置等
        zoomVal: 1,
        isDown: false,
        disX: 0,
        disY: 0,
      },
    };
  },
  created() {
    this.imageurl = this.$route.params.imageurl;
  },
  mounted() {
    this.img = this.$refs.image;

    /*另图片居中
     屏幕宽/高度减去图片宽/高度 再除以 2 
     就得出图片要移动的位置
     */
    this.img.style.left = (document.body.clientWidth - this.img.width) / 2 + "px";
    this.img.style.top = (document.body.clientHeight - this.img.heighth) / 2 + "px";
    this.img.style.right = "none";
    this.img.style.right = "none";
    this.img.style.margin = "inherit";
  },
  methods: {
    mouseUp() {
      //鼠标抬起
      this.params.isDown = false;
    },
    mouseDown(e) {
      //鼠标按下事件
      this.params.disX = e.clientX - this.img.offsetLeft;
      this.params.disY = e.clientY - this.img.offsetTop;
      //开关打开
      this.params.isDown = true;
      console.log("鼠标按下");
      //mousedown.prevent阻止默认事件，否则鼠标拖拽的时候监听不到鼠标抬起
    },
    mouseMove(e) {
      if (!this.params.isDown) return;
      this.img.style.left = e.clientX - this.params.disX + "px";
      this.img.style.top = e.clientY - this.params.disY + "px";
    },
    mousewheel(e) {
      //鼠标滚动事件
      if (e.wheelDelta || e.detail) {
        this.params.zoomVal += e.wheelDelta / 1200;
        if (this.params.zoomVal < 0.2) {
          this.params.zoomVal = 0.2;
        }
        this.img.style.transform = "scale(" + this.params.zoomVal + ")";
      }
    },
  },
};
</script>
<style scoped>
div {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}
div img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  cursor: move;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

</style>

<template>
  <!-- 该页面用于“查看大图”，只放一个图片；图片可以缩放，可以拖拽 
  encodeURIComponent("https://www.baidu.com/");  
  http://localhost:8080/showbigimg/参数

  eg: http://localhost:8080/showbigimg/http%3A%2F%2Ft.sciencemate.com%2Fpublic%2Fupload%2Ffiles%2Fmeeting%2F202109%2Fothers0320210915104430.jpg
  -->

  <div @mousewheel="mousewheel" @mousemove="mouseMove">
    <img
      ref="image"
      :src="imageurl"
      alt=""
      @mousedown.prevent="mouseDown"
      @mouseup="mouseUp"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageurl: "",
      img: null,
      params: {
        //用于计算图片的缩放，位置等
        zoomVal: 1,
        isDown: false,
        disX: 0,
        disY: 0,
      },
    };
  },
  created() {
    this.imageurl = this.$route.params.imageurl;
  },
  mounted() {
    this.img = this.$refs.image;

    /*另图片居中
     屏幕宽/高度减去图片宽/高度 再除以 2 
     就得出图片要移动的位置
     */
    this.img.style.left = (document.body.clientWidth - this.img.width) / 2 + "px";
    this.img.style.top = (document.body.clientHeight - this.img.heighth) / 2 + "px";
  },
  methods: {
    mouseUp() {
      //鼠标抬起
      this.params.isDown = false;
    },
    mouseDown(e) {
      //鼠标按下事件
      this.params.disX = e.clientX - this.img.offsetLeft;
      this.params.disY = e.clientY - this.img.offsetTop;
      //开关打开
      this.params.isDown = true;
      console.log("鼠标按下");
      //mousedown.prevent阻止默认事件，否则鼠标拖拽的时候监听不到鼠标抬起
    },
    mouseMove(e) {
      if (!this.params.isDown) return;
      this.img.style.left = e.clientX - this.params.disX + "px";
      this.img.style.top = e.clientY - this.params.disY + "px";
    },
    mousewheel(e) {
      //鼠标滚动事件
      if (e.wheelDelta || e.detail) {
        this.params.zoomVal += e.wheelDelta / 1200;
        if (this.params.zoomVal < 0.2) {
          this.params.zoomVal = 0.2;
        }
        this.img.style.transform = "scale(" + this.params.zoomVal + ")";
      }
    },
  },
};
</script>
<style scoped>
div {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}
div img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  cursor: move;
}
</style>

最后

以上就是搞怪大象为你收集整理的查看大图：图片可以缩放，可以拖拽的全部内容，希望文章能够帮你解决查看大图：图片可以缩放，可以拖拽所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。