vue项目中移动端的图片预览

首先我试过三种方式分别是wc-view、vant中的upload组件、v-viewer插件（也可用于pc端）。
这三种的差别在于
wc-view：只可以放大预览，不可以手动放大图片。
vant中的upload组件：可以放大预览，也可以手动放大，但是它不可以无限放大。
v-viewer：是既可以放大预览，也可以手动放大，最终我选择了这一钟

1、wc-view插件的方式

首先安装依赖

npm i wc-view --save-dev

在main.js中引入文件

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

使用

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

如果 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'