vue配合vuex实现移动端图片点击放大，再点击恢复。

直接进入正题

首先写一个遮蔽层组件用来展示图片。上代码

• template中zhebi用作手机显示屏的遮罩层，img来展示图片。注意我的img没有嵌入到zhebi中，因为我想给遮蔽层设置透明度，img的层级z-index高于zhebi透明度不受遮蔽层影响。另外因为要显示的图片资源不在该组件中所以我在vuex中定义了图片的资源。click事件用来关闭遮罩（后面再讲）。v-show默认false

---

• css有注释，需要注意的是fixed定位图片居中显示有些麻烦。

---

再来看我vuex中的定义

state中

• show控制着遮蔽组件的显示
• src表示需要展示的图片资源路径

mutations中

• CHANGE_SHOW方法用来改变show的状态,形参arg接收图片资源。
• CLOSE_SHOW方法用来设置show为false,因为用户在放大图片之后可能不会再点击屏幕恢复图片而是直接按返回键返回,所以我们需要帮忙擦屁股。

遮蔽组件使用

• 在需要用的页面中导入。

---

• 在导入的页面template中随意加入，默认是不会渲染出来的。

---

这边我渲染了一组图片，加入了click事件，一点击图片就会执行CHANG_SHOW,show由false变更为true,遮蔽层出现。同时state中的src接收到传入的图片资源imgSrc，你点击的图片就会按照你设定的css效果在遮蔽层中展示出来。

最后：如果用户没有再次按遮蔽层触发CHANG_SHOW关闭遮蔽层而是直接按返回键返回，请在合适的地方执行CLOSE_SHOW替用户将show的状态改为false。整个过程是不是非常简单，代码应该也很精简除了vuex的一点小操作就没写过js。

转载于:https://juejin.im/post/5bf6743e5188254d070bee11