vue点击放大图片功能实现【超简单!】

在这里插入图片描述实现步骤:

1.下载Viewer组件

  npm install v-viewer --save

2.在图片显示的页面引用 viewer组件(一个js文件,一个css样式文件)

  import Viewer from "@/assets/js/viewer.min.js";

  import '@/assets/css/viewer.min.css';

3.再需要点击图片的标签添加点击事件@click

 <img :id ="item.publicFileURL" :src="item.publicFileURL" @click="aaa(item)" >

在这里插入图片描述

说明:因为我的图片是在集合中存的需要动态的点击放大(点哪个放大哪个)----id很重要 aaa()方法中要用

4.@click="aaa(item)"方法

 aaa(item) {

      var viewer = new Viewer(document.getElementById(item.publicFileURL), {

          url: item.publicFileURL,

   });

},
在这里插入图片描述

如果有疑问,或者和自己的想法认识有出入请参考下面博客。

技术参考:https://blog.csdn.net/archer119/article/details/78390203

作者:石小石
来源:CSDN
原文:https://blog.csdn.net/qq_38214630/article/details/83821855
版权声明:本文为博主原创文章,转载请附上博文链接!

  • 2
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
实现Vue 2的放大功能,你可以按照以下步骤进行操作: 1. 首先,确保你已经在项目中引入了Vue 2。 2. 在需要使用放大功能的组件中,定义一个data属性用于存储放大镜的状态,例如: ```javascript data() { return { zoomed: false, // 放大镜状态,默认为false mouseX: 0, // 鼠标X轴坐标 mouseY: 0, // 鼠标Y轴坐标 zoomX: 0, // 放大镜X轴坐标 zoomY: 0, // 放大镜Y轴坐标 } }, ``` 3. 在模板中,使用`v-on`指令监听鼠标移动事件,并更新鼠标坐标: ```html <template> <div @mousemove="updateMousePosition"> <!-- 图片展示区域 --> <div class="image-container"> <img src="path/to/image.jpg" alt="Image"> </div> <!-- 放大镜区域 --> <div v-if="zoomed" class="zoom-container" :style="{ left: zoomX + 'px', top: zoomY + 'px' }"> <img src="path/to/image.jpg" alt="Zoomed Image"> </div> </div> </template> ``` 4. 在方法中,实现更新鼠标坐标和放大镜位置的逻辑: ```javascript methods: { updateMousePosition(event) { this.mouseX = event.clientX; this.mouseY = event.clientY; this.updateZoomPosition(); }, updateZoomPosition() { const container = document.querySelector('.image-container'); const zoomContainer = document.querySelector('.zoom-container'); if (container && zoomContainer) { const containerRect = container.getBoundingClientRect(); const zoomContainerRect = zoomContainer.getBoundingClientRect(); // 根据鼠标坐标和图片容器位置计算放大镜位置 this.zoomX = this.mouseX - containerRect.left - zoomContainerRect.width / 2; this.zoomY = this.mouseY - containerRect.top - zoomContainerRect.height / 2; // 限制放大镜位置在图片容器内部 this.zoomX = Math.max(0, Math.min(this.zoomX, containerRect.width - zoomContainerRect.width)); this.zoomY = Math.max(0, Math.min(this.zoomY, containerRect.height - zoomContainerRect.height)); } } } ``` 5. 最后,添加一些CSS样式来定义图片容器和放大镜的样式: ```css .image-container { position: relative; } .zoom-container { position: absolute; width: 200px; /* 自定义放大镜的宽度 */ height: 200px; /* 自定义放大镜的高度 */ border: 1px solid #ccc; pointer-events: none; /* 防止放大镜影响鼠标事件 */ } ``` 这样,你就可以在Vue 2中实现一个简单放大功能了。当鼠标在图片上移动时,会显示一个放大的镜头,跟随鼠标移动并显示放大的图像。根据需要,你可以自定义放大镜的样式和放大倍数。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值