插件"/>
基于Vue的移动端图片查看插件
wc-view
移动端图片浏览插件
安装
npm i wc-view --save-dev
使用
import wcView from 'wc-view';
import 'wc-view/style.css';
Vue.use(wcView);
img 标签时:
<img class="wc-preview-img" :src="url" v-for="(url, index) in list" :key="index" @click="$preview($event, list, index)">如果 list 是一个对象数组的时候,
需要额外为 $preview 传递一个参数, 用于标记对象里哪一个字段是图片 url;
<img class="wc-preview-img" :src="item.img" v-for="(item, index) in list" :key="index" @click="$preview($event, list, index,'img')">背景图时:
<div v-for="(url, index) in list" :key="index" @click="$preview($event, list, index)">
img 和 背景图之间的区别:
- img的查看效果, 图片带一个放大效果; 而背景图不带;
- 为 img 设置大小的时候, 可能会显示变形, 而背景图可以通过 background-size 保持图片
显示正常;
- 需要额外的为 img 标签加上一个 wc-perview-img class, 为的是放大效果正常显示;
其他
压缩之后在 10k 左右;
默认的图片显示方式是宽度优先, 高度会按比例缩放;(一般情况下图片的宽度会被变成 100% 屏幕宽度)
支持 pagination;
更多推荐
基于Vue的移动端图片查看插件
发布评论