使用Vue2开发一个图片预览组件，支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作

• 前端

写在开头

话不多说，咱们赶紧来开启本章的内容，这次小编给各位带来的依旧是实用类文章，分享如何开发一个完整的图片预览组件，它支持多图切换、放大缩小、旋转、鼠标滚轮操作、键盘按键控制、拖动等等的功能，并且使用方便、易扩展，零依赖。

项目初始化

项目演示技术小编采用的是 Vue2，如果你有安装 vue-cli 脚手架的话，可以直接通过 vue create projectName 命令来初始化项目。

然后，在 components 文件夹下创建 ImagePreview 组件目录，并创建 Preview.vue 文件与 utils.js 文件，具体目录结构如下：

基本布局

以上图片是本次要实现的最终效果，我们先根据它把布局给搞定，Preview.vue 文件具体代码：

<使用Vue2开发一个图片预览组件，支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作使用Vue2开发一个图片预览组件，支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作<path d="M758.2 839.1C851.8 765.9 912 651.9 912 523.9 912 303 733.5 124.3 512.6 124 291.4 123.7 112 302.8 112 523.9c0 125.2 57.5 236.9 147.6 310.2 3.5 2.8 8.6 2.2 11.4-1.3l39.4-50.5c2.7-3.4 2.1-8.3-1.2-11.1-8.1-6.6-15.9-13.7-23.4-21.2-29.4-

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/da6e6a51d4.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐