基於 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, 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;