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

 更新时间:2021年05月13日 14:18:08   作者:DOM曼珠沙华  
现在项目中有这样的一个需求,对上传的图片可以点击之后在线预览,这篇文章主要给大家介绍了关于Vue实现图片预览效果实例(放大、缩小、拖拽)的相关资料,需要的朋友可以参考下

前言

这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于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=""
        @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>

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

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

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

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

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

总结

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

相关文章

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    Vue CLI是一个基于Vue.js进行快速开发的完整系统,下面这篇文章主要给大家介绍了关于Vue cli3.0创建Vue项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 关于vue中 $emit的用法详解

    关于vue中 $emit的用法详解

    这篇文章主要介绍了vue中 $emit的用法,通过实例代码给大家介绍了子组件和父组件的相关知识,需要的朋友参考下吧
    2018-04-04
  • 解读vue页面监听store值改变问题

    解读vue页面监听store值改变问题

    这篇文章主要介绍了解读vue页面监听store值改变问题,具有很好的参考价值,希望对大家有所帮助。
    2022-10-10
  • 前端vue uni-app cc-countdown倒计时组件使用详解

    前端vue uni-app cc-countdown倒计时组件使用详解

    cc-countdown是一个倒计时组件,它可以显示剩余时间、天数、小时数、分钟数和秒数,在本文中,我们将介绍如何在uni-app中使用cc-countdown组件,需要的朋友可以参考下
    2023-08-08
  • 详解vue模拟加载更多功能(数据追加)

    详解vue模拟加载更多功能(数据追加)

    本篇文章主要介绍了vue模拟加载更多功能(数据追加),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue2 Dialog弹窗函数式调用实践示例

    Vue2 Dialog弹窗函数式调用实践示例

    这篇文章主要为大家介绍了Vue2 Dialog弹窗函数式调用实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 绘制flowable 流程图的Vue 库使用详解

    绘制flowable 流程图的Vue 库使用详解

    这篇文章主要为大家介绍了绘制flowable 流程图的Vue 库使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 详解vue组件基础

    详解vue组件基础

    本篇文章给大家总结了vue组件基础的相关知识点以及代码实例,有需要的朋友可以学习参考下。
    2018-05-05
  • vue3+Element Plus v-model实现父子组件数据同步的案例代码

    vue3+Element Plus v-model实现父子组件数据同步的案例代码

    这篇文章主要介绍了vue3+Element Plus v-model实现父子组件数据同步,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • vue组件与复用详解

    vue组件与复用详解

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下
    2018-04-04

最新评论