Vue 移动端图片查看插件

原文链接： https://github.com/helicopters/wc-view

缺点：不能缩放图片。

1，安装

npm i wc-view --save-dev

2，全局引入，也可局部

import wcView from 'wc-view';
import 'wc-view/style.css';
Vue.use(wcView);

3，使用

1，img 标签时: 

<img class="wc-preview-img" :src="url" v-for="(url, key) in list" :key="key" @click="$preview($event, list, key)">



2，如果 list 是一个对象数组的时候,
需要额外为 $preview 传递一个参数, 用于标记对象里哪一个字段是图片 url;

<img class="wc-preview-img" :src="item.img" v-for="(item, key) in list" :key="key" @click="$preview($event, list, key,'img')">



3，背景图时:

<div v-for="(url, key) in list" :key="key" @click="$preview($event, list, key)">

4，效果图

---

img 和 背景图之间的区别:

• img的查看效果, 图片带一个放大效果; 而背景图不带;
• 为 img 设置大小的时候, 可能会显示变形, 而背景图可以通过 background-size 保持图片

显示正常;

• 需要额外的为 img 标签加上一个 wc-perview-img class, 为的是放大效果正常显示;

配置选项 

showCloseBtn: 是否显示关闭按钮, 默认为 true // $preview($event, list, key, '', {showCloseBtn: false})；

---

原项目地址：https://github.com/helicopters/wc-view