首先我试过三种方式分别是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'