基于vue的单文件组件以鼠标为中心滚动滑轮实现图片缩放

qq_36681092 2018-10-09 02:33:00

本人菜鸟一枚，最近公司有个小需求，就是要实现类似于地图的拖拉和缩放的功能，我知道网上有许多例子，但是我想实现一个基于vue的一个功能组件，方便以后的使用，目前已经实现了拖拉的功能，但是以鼠标为中心滚动滑轮的没有实现，想求助各位大神，（尝试了各种方法还是不行，希望各位能把源码发一下，感激不尽）

...全文

803 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

m0_61418639 2021-09-26

打赏
举报

回复

你实现了吗，我也有这个需求，拖拽都可以，就是以鼠标为中心点缩放怎么都搞不出来

馍馍xs 2019-11-04

打赏
举报

回复

最终实现这个效果了吗？

vue图片拖拽及鼠标滚轮放大缩小效果，vue实现图片放大缩小及拖拽，vue项目实现图片缩放与拖拽功能，vue如何实现图片放大缩小拖拽，vue实现图片拖拽及鼠标滚轮放大缩小，vue图像拖拽,鼠标滚轮放大缩小，基于vue图片拖拽放大缩小，vue实现拖着一张图片走的效果，vue怎么让一张图片可以拖动，vue网页使图片图像可以用鼠标拖动，vue鼠标在图片上的时候怎么用滚轮缩放图片大小，vue 图片拖拽和滚轮缩放，vue组件实现图片的拖拽和缩放，Vue2实现图片的拖拽,缩放和旋转效果的示例代码，vue 图像拖拽、鼠标

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】过不少同行后辈。

代码来自网上，小小改动了下，因为需求的缘故，需要在页面上引用svg，改动了部分代码引用部分 <template> <div> <previewPicture> <template v-slot:svg> <div class="svg"></div> </template> </previewPicture> </div> </template> <

1、用鼠标滚轮可对图片进行缩放处理 2、点击按钮可对图片进行缩放处理 3、可对图片进行拖拽处理

样式上写的固定宽高图片可能会有所压缩，所以样式用的媒体查询。

87,994

社区成员

224,693

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章