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

" title="" data-original-title="复制">

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')">

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

img 和 背景图之间的区别:

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

显示正常;

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

其他

• 压缩之后在 10k 左右;
• 默认的图片显示方式是宽度优先, 高度会按比例缩放;(一般情况下图片的宽度会被变成 100% 屏幕宽度)
• 支持 pagination;

项目地址

wc-view;

脚本宝典总结

以上是脚本宝典为你收集整理的基于 Vue 的移动端图片查看插件.全部内容，希望文章能够帮你解决基于 Vue 的移动端图片查看插件.所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。