vue實(shí)現(xiàn)圖片預(yù)覽放大以及縮小問題

更新時間：2023年01月14日 14:30:27 作者：前端張小小

這篇文章主要介紹了vue實(shí)現(xiàn)圖片預(yù)覽放大以及縮小問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue圖片預(yù)覽放大以及縮小

1.在vue的環(huán)境下實(shí)現(xiàn)圖片放大縮小，可以使用viewerjs

效果圖：

關(guān)于 viewerjs的使用

1）首先安裝依賴

npm i v-viewer --save

2）全局注冊（在main.js）以及引用css

//導(dǎo)入圖片預(yù)覽viewer組件以及css
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
  Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

關(guān)于viewerjs中setDeafaults的配置下面有一張表，大家可以參考一下

這些工作都做完以后，然后可以在components（公共組件）文件下新建一個文件夾，命名看個人習(xí)慣，再新建一個以xxx.vue文件（同上，命名不做具體要求看個人習(xí)慣）。

在xxx.vue中寫入

<template>
  <div class="content">
    <!-- <h1>Viewer圖片預(yù)覽插件</h1> -->
    <viewer :images="viewerList">
      <img
        v-for="src in viewerList"
        :src="src.icon"
        :key="src.id"
        style="width: 50px; height: 50px; margin-right: 5px"
      />
    </viewer>
  </div>
</template>
 
<script>
export default {
  props: {
    viewerList: {
      type: Array,
      default: [],
    },
  },
  mounted() {},
  data() {
    return {};
  },
};
</script>
 
<style>
</style>

因?yàn)橐呀?jīng)全局注冊過了，可以直接使用<viewer>標(biāo)簽然后這個作為子組件。viewer綁定的一定要為數(shù)組，不然是會報(bào)錯的（避坑）。

當(dāng)這些都準(zhǔn)備好的就可以在“父頁面”使用了。

在父頁面不要忘了引用以及注冊

import viewer from "../../../components/viewer/viewer-preview.vue";
export default {
  name: "business",
  components: { viewer },
}

僅展示了關(guān)鍵代碼，其他的data(){ return{ } }等等按需寫入。

注冊完以后在需要用到的地方直接寫入，數(shù)據(jù)的都是通過父傳子props的方式

  <Table :columns="figurenHeader" :data="figurenData">
          <template slot-scope="{ row }" slot="img">
            <div style="margin-top: 10px">
              <viewer :viewerList="row.iconUrlList"></viewer>
            </div>
          </template>
        </Table>

因?yàn)槭褂玫氖莟able里面的插槽，所以傳入的數(shù)據(jù)為row.iconUrlList. 這樣整個工作就算是結(jié)束了。

vue實(shí)現(xiàn)圖片預(yù)覽(放大縮小拖拽)純手寫

這張圖是顯示的圖片放大的一個預(yù)覽情況，這里是參考預(yù)覽操作實(shí)現(xiàn)的一個背景為黑色的部分，上層的圖片可實(shí)現(xiàn)滾輪放大或者點(diǎn)擊上部的放大鏡圖標(biāo)進(jìn)行放大，代碼是基于Ant Design Vue框架的基礎(chǔ)上

這里先分解部分，后面有全部代碼

1.需要有黑色背景用于預(yù)覽背景：

這里的背景要占滿整個屏幕（這里的一般是參考其他插件預(yù)覽的樣式進(jìn)行模擬設(shè)計(jì)的），樣式在后方代碼內(nèi)

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是作為圖片的動態(tài)樣式，雖然名字起得著急，但是不影響使用

整體實(shí)現(xiàn)的功能

點(diǎn)擊圖片，可以進(jìn)行滾輪放大及縮小，
點(diǎn)擊后按壓左鍵可進(jìn)行拖拽查看圖片
點(diǎn)擊上方的放大及縮小圖標(biāo)也可以進(jìn)行放大等操作，
點(diǎn)擊 x 可關(guān)于預(yù)覽
點(diǎn)擊關(guān)閉后，恢復(fù)大小，避免點(diǎn)擊其他照片影響大小

下面是全部實(shí)現(xiàn)代碼：

<template>
  <a-card style="width: 100%">
    <div>
      <img
        :src="file"
        alt=""
        @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="" :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: {
    // 實(shí)現(xiàn)圖片放大縮小 
    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
      }
    },
    // 實(shí)現(xiàn)圖片拖拽
    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
      }
    },
    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, 0, 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, 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>

因?yàn)榫唧w也是查看了很多博客等資源最后完成的。

其實(shí)在代碼內(nèi)有一部分代碼：

<img
	:src="file"
	preview="0"
	preview-text="圖片"
	alt=""
	@click="handlePhotoShow(file)"
/>

其實(shí)有 preview="0" preview-text="圖片" 這兩行實(shí)現(xiàn)圖片的預(yù)覽，但是找了資料沒找到具體實(shí)現(xiàn)的部分，但是這個屬性確實(shí)實(shí)現(xiàn)了

這里手寫預(yù)覽的原因是這個插件在數(shù)量大的情況下是沒有反應(yīng)的。

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)圖片預(yù)覽放大以及縮小問題

目錄

vue圖片預(yù)覽放大以及縮小

關(guān)于 viewerjs的使用

vue實(shí)現(xiàn)圖片預(yù)覽(放大縮小拖拽)純手寫

滾輪放大縮小圖片

圖片拖拽

整體實(shí)現(xiàn)的功能

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具