基於 Vue 的移動端圖片檢視外掛.

雲水搖啊搖發表於2017-11-28
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;

相關文章