有空来撸一只图片浏览器？power by vue.js

废话不多说，先看东西

这是详情，支持1~9宫格

点击任意一张图既可进入浏览详情页面

左右可以切换，点击底部的列表也可以切换。

点击中间收起，顶部可以旋转，查看原图等功能。

这个其实就是我们摸鱼模块里的图片预览组件。

接下来，我们就是要写这么个玩意。

环境

这个是nuxt.js项目+element-ui

element-ui 主要是用了几个图标，也没使用啥。

所以还是靠纯手工撸码吧

分析

这个控件，有三个状态

普通的预览状态

详情浏览状态

原图查看状态

第一和第二个状态互斥，第二和第三个状态可以共存

所以我们在div结构上可以分三个。

通过状态来控制显示和隐藏既可。

再细分：

普通预览状态

这个没有难度，就是图片渲染，然后根据不同的图片数量控制大小样式之类的。而类名可以动态根据图片的数量生成。

共同样式的进行抽取既可。

详情页面

收起功能，其实就是改变状态，控制显示既可。

查看大图，就是显示当前的图片的原图既可，不改变大小。写个样式，显示一下就可以了。

左右旋转，旋转我们通过修改translate里的rotate既可，再通过计算一下偏移量，重新修正大小，并且动态改变容器的大小。

左右切换，本质上就是移动下标，然后更新数据源。这里要注意的是界限和重置旋转后的状态。

以上分析就可以完成这个功能了。在摸鱼君的课程里不会详细讲此课程，这只是作为了个组件模块讲解，跟表情控制面板一样。

在摸鱼君课程中，直接使用该控件。

代码实现

布局代码

先是看看整体的布局代码

这里就是三部分的内容了

preview 预览部分

detail 详情部分

original 原图显示部分

数据源

从预览到详情页面

旋转

控制左右切换的边界

更新图片的显示

显示原图

关闭原图

左右切换

样式代码就不贴了，自己写吧。

做这种东西，看完分析应该就可以自己写出来了。不能完全了白嫖，嫖思想就行了，哈哈。