前言

這張圖是顯示的圖片放大的一個預覽情況，這裡是參考預覽操作實現的一個背景為黑色的部分，上層的圖片可實現滾輪放大或者點選上部的放大鏡圖示進行放大，程式碼是基於Ant Design vue框架的基礎上

這裡先分解部分，後面有全部程式碼

1.需要有黑色背景用於預覽背景：

這裡的背景要佔滿整個螢幕（這裡的一般是參考程式設計客棧其他外掛預覽的樣式進行模擬設計的），樣式在後方程式碼內

2.展示圖片並且把圖片展示到背景板最中間。

3.最重要的下方的兩部分：

滾輪放大縮小圖片：

bbimg() {
      let e = e || window.event
      this.params.zoomVal += e.wheelDelta / 1200
      if (this.params.zoomVal >= 0.2) {
        this.test = `transform:scale(${this.params.zoomVal});`
      } else {
        this.params.zoomVal = 0.2
        this.test = `transform:scale(${this.params.zoomVal});`
        return false
      }
    },

圖片拖拽：

imgMove(e) {
      console.log('e',e)
      let oImg = e.target
      let disX = e.clientX - oImg.offsetLeft
      let disY = e.clientY - oImg.offsetTop
      console.log('disX',disX)
      document.onmousemove = (e) => {
        e.preventDefault()
        let left = e.clientX - disX
        let top = e.clientY - disY
        this.test = this.test + 
 
程式設計客棧`left: ${left}px;top: ${top}px;`
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },

這裡的test和classStyle是作為圖片的動態樣式，雖然名字起得著急，但是不影響使用

整體實現的功能：

1. 點選圖片，可以進行滾輪放大及縮小，
2. 點選後按壓左鍵可進行拖拽檢視圖片
3. 點選上方的放大及縮小圖示也可以進行放大等操作，
4. 點選 x 可關於預覽
5. 點選關閉後，恢復大小，避免點選其他照片影響大小

下面是全部實現程式碼：

<template>
  <a-card style="width: 100%">
    <div>
      <img
        :src程式設計客棧="file"
        alt="Vue實現圖片預覽效果例項（放大、縮小、拖拽）"
        @click="handlePhotoShow(file)"
        />
      <!-- preview="0"
        preview-text="圖片" -->
    </div>
    <div class="showImg" v-if="pictShow" @mousewheel="bbimg(this)">
      <div class="setting_box">
        <a-icon
          class="setting_zoom"
          v-if="zoomInShow == false"
          type="zoom-in"
          @click="handleZoomIn"
        />
        <a-icon
          color="#fff"
          class="setting_zoom"
          v-if="zoomInShow == true"
          type="zoom-out"
          @click="handleZoomOut"
        />
        <a-icon color="#fff" class="setting_close" type="close" @click="handleClose" />
      </div>
      <img :src="file" alt="Vue實現圖片預覽效果例項（放大、縮小、拖拽）" :class="classStyle" :style="test" @mousedown="imgMove" />
    </div>
  </a-card>
</template>
 
<script>
export default {
  data() {
    return {
      test: '',pictShow: false,zoomInShow: false,params: {
        zoomVal: 1,left: 0,top: 0,currentX: 0,currentY: 0,flag: false,},file: '',}
  },computed: {
    classStyle() {
      return this.zoomInShow ? 'a1' : 'a2'
    },methods: {
    // 實現圖片放大縮小 
    bbimg() {
      let e = e || window.event
      this.params.zoomVal += e.wheelDelta / 1200
      if (this.params.zoomVal >= 0.2) {
        this.test = `transform:scale(${this.params.zoomVal});`
 http://www.cppcns.com     } else {
        this.params.zoomVal = 0.2
        this.test = `transform:scale(${this.params.zoomVal});`
        return false
      }
    },// 實現圖片拖拽
    imgMove(e) {
      console.log('e',e)
      let oImg = e.target
      let disX = e.clientX - oImg.offsetLeft
      let disY http://www.cppcns.com= e.clientY - oImg.offsetTop
      console.log('disX',disX)
      document.onmousemove = (e) => {
        e.preventDefault()
        let left = e.clientX - disX
        let top = e.clientY - disY
        this.test = this.test + `left: ${left}px;top: ${top}px;`
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },handleZoomIn() {
      this.zoomInShow = true
    },handleZoomOut() {
      this.zoomInShow = false
    },handlePhotoShow(file) {
      console.log('file',file)
      this.file = file
      this.pictShow = true
    },handleClose() {
      this.pictShow = false
      this.test = `transform:scale(1)`
    },}
</script>
<style scoped lang="less">
.showImg {
  width: 100%;
  height: 100vh;
  background-color: rgba(0,1);
  position: fixed;
  *position: absolute;
  z-index: 20;
  margin: 0 auto;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .setting_box {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    background-color: rgba(0,0.3);
    position: absolute;
    top: 0;
    z-index: 999;
    .setting_zoom,.setting_close {
      position: absolute;
      z-index: 1000;
      top: 20px;
      color: #fff;
      opacity: 1;
    }
    .setting_zoom {
      right: 50px;
    }
    .setting_close {
      right: 10px;
    }
  }
}
.a1 {
  max-width: 200vw;
  max-height: 180vh;
  position: absolute;
  z-index: 22;
  margin-top: 40px;
  cursor: move;
}
.a2 {
  max-width: 95vw;
  max-height: 90vh;
  position: absolute;
  z-index: 22;
  margin-top: 40px;
  cursor: move;
}
.zoom-box {
  cursor: zoom-in;
}
.photo_box {
  margin: 0 5px 5px 0;
}
</style>

因為具體也是查看了很多部落格等資源最後完成的。

其實在程式碼內有一部分程式碼：

<img
	:src="file"
	preview="0"
	preview-text="圖片"
	alt="Vue實現圖片預覽效果例項（放大、縮小、拖拽）"
	@click="handlePhotoShow(file)"
/>

其實有 preview="0" preview-text="圖片" 這兩行實現圖片的預覽，但是找了資料沒找到具體實現的部分，但是這個屬性確實實現了

這裡手寫預覽的原因是這個外掛在數量大的情況下是沒有反應的。

總結

到此這篇關於Vue實現圖片預覽效果例項（放大、縮小、拖拽）的文章就介紹到這了,更多相關Vue圖片放大縮小拖拽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！