Vue实现图片预览效果实例（放大、缩小、拖拽）

442 阅读 0 评论 292 点赞

我是靠谱客的博主苹果面包，这篇文章主要介绍Vue实现图片预览效果实例（放大、缩小、拖拽），现在分享给大家，希望可以做个参考。

前言

这张图是显示的图片放大的一个预览情况，这里是参考预览操作实现的一个背景为黑色的部分，上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大，代码是基于Ant Design Vue框架的基础上

这里先分解部分，后面有全部代码

1.需要有黑色背景用于预览背景：

这里的背景要占满整个屏幕（这里的一般是参考其他插件预览的样式进行模拟设计的），样式在后方代码内

2.展示图片并且把图片展示到背景板最中间。

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

滚轮放大缩小图片：

复制代码

1
2
3
4
5
6
7
8
9
10
11
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
      }
    },

图片拖拽：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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是作为图片的动态样式，虽然名字起得着急，但是不影响使用

整体实现的功能：

点击图片，可以进行滚轮放大及缩小，
点击后按压左键可进行拖拽查看图片
点击上方的放大及缩小图标也可以进行放大等操作，
点击 x 可关于预览
点击关闭后，恢复大小，避免点击其他照片影响大小

下面是全部实现代码：

复制代码

<template>
  <a-card style="width: 100%">
    <div>
      <img
        :src="file"
        alt=""
        @click="handlePhotoShow(file)"
        />
      
    </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>
        <a-icon
          color="#fff"
          class="setting_zoom"
          v-if="zoomInShow == true"
          type="zoom-out"
          @click="handleZoomOut"
        ></a-icon>
        <a-icon color="#fff" class="setting_close" type="close" @click="handleClose" ></a-icon>
      </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: {
    // 实现图片放大缩小 
    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
      }
    },
    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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<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: {
    // 实现图片放大缩小 
    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
      }
    },
    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>

因为具体也是查看了很多博客等资源最后完成的。

其实在代码内有一部分代码：

复制代码

1
2
3
4
5
6
7
<img
	:src="file"
	preview="0"
	preview-text="图片"
	alt=""
	@click="handlePhotoShow(file)"
/>

其实有 preview="0" preview-text="图片" 这两行实现图片的预览，但是找了资料没找到具体实现的部分，但是这个属性确实实现了

这里手写预览的原因是这个插件在数量大的情况下是没有反应的。

总结

到此这篇关于Vue实现图片预览效果实例（放大、缩小、拖拽）的文章就介绍到这了,更多相关Vue图片放大缩小拖拽内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！

最后

以上就是苹果面包最近收集整理的关于Vue实现图片预览效果实例（放大、缩小、拖拽）的全部内容，更多相关Vue实现图片预览效果实例（放大、缩小、拖拽）内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaScript
浏览次数：442 次浏览
发布日期：2022-05-12 19:30:02
本文链接：https://www.kaopuke.com/article/k-p-k_14_u_7_ogf4_14__23__14_1.html

Vue实现图片预览效果实例（放大、缩小、拖拽）

最后

评论列表共有 0 条评论

发表评论取消回复

Vue实现图片预览效果实例（放大、缩小、拖拽）

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复