基于 Vue 的移動端圖片查看插件.

wenyiweb 發(fā)布于2019-08-21 17:49 / 1690人閱讀

摘要：移動端圖片瀏覽插件演示地址演示地址安裝使用標(biāo)簽時(shí)如果是一個(gè)對象數(shù)組的時(shí)候需要額外為傳遞一個(gè)參數(shù)用于標(biāo)記對象里哪一個(gè)字段是圖片背景圖時(shí)和背景圖之間的區(qū)別的查看效果圖片帶一個(gè)放大效果而背景圖不帶為設(shè)置大小的時(shí)候可能會

wc-view

移動端圖片瀏覽插件.

演示地址

演示地址

安裝

npm i wc-view --save-dev

使用

import wcView from "wc-view";
import "wc-view/style.css";
Vue.use(wcView);

img 標(biāo)簽時(shí): 


如果 list 是一個(gè)對象數(shù)組的時(shí)候,
需要額外為 $preview 傳遞一個(gè)參數(shù), 用于標(biāo)記對象里哪一個(gè)字段是圖片 url;


背景圖時(shí):

img 和背景圖之間的區(qū)別:

img的查看效果, 圖片帶一個(gè)放大效果; 而背景圖不帶;

為 img 設(shè)置大小的時(shí)候, 可能會顯示變形, 而背景圖可以通過 background-size 保持圖片

顯示正常;

需要額外的為 img 標(biāo)簽加上一個(gè) wc-perview-img class, 為的是放大效果正常顯示;

其他

壓縮之后在 10k 左右;

默認(rèn)的圖片顯示方式是寬度優(yōu)先, 高度會按比例縮放;(一般情況下圖片的寬度會被變成 100% 屏幕寬度)

支持 pagination;

項(xiàng)目地址

wc-view;

GPU云服務(wù)器云服務(wù)器時(shí)間插件移動端移動端js時(shí)間插件移動端翻頁插件手機(jī)查看圖片js插件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90047.html

相關(guān)文章

使用vue開發(fā)移動端管理后臺

摘要：獨(dú)立完成一個(gè)移動端項(xiàng)目不是很明白為何會有這樣的商品管理后臺，還是有些經(jīng)驗(yàn)不足，包括對產(chǎn)品的全局思考，對插件的選擇等，都有考慮不周的缺點(diǎn)，導(dǎo)致自己中途想換圖形界面插件，浪費(fèi)了點(diǎn)時(shí)間，這里記錄下，總結(jié)下經(jīng)驗(yàn)，理一下思路。獨(dú)立完成一個(gè)移動端項(xiàng)目(不是很明白為何會有這樣的商品管理后臺)，還是有些經(jīng)驗(yàn)不足，包括對產(chǎn)品的全局思考，對插件的選擇等，都有考慮不周的缺點(diǎn)，導(dǎo)致自己中途想換圖形界面插件，...

simpleapples 2019-08-23 15:42 評論0 收藏0
用vue開發(fā)一個(gè)公眾號商城SPA——1.前期準(zhǔn)備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項(xiàng)目準(zhǔn)備搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括端商城微信公眾號網(wǎng)頁商城后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項(xiàng)目準(zhǔn)備、搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括PC端商城、微信公眾號網(wǎng)頁商城、后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很...

endiat 2019-08-22 18:23 評論0 收藏0
用vue開發(fā)一個(gè)公眾號商城SPA——1.前期準(zhǔn)備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項(xiàng)目準(zhǔn)備搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括端商城微信公眾號網(wǎng)頁商城后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項(xiàng)目準(zhǔn)備、搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括PC端商城、微信公眾號網(wǎng)頁商城、后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很...

doodlewind 2019-07-25 14:21 評論0 收藏0
用vue開發(fā)一個(gè)公眾號商城SPA——1.前期準(zhǔn)備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項(xiàng)目準(zhǔn)備搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括端商城微信公眾號網(wǎng)頁商城后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項(xiàng)目準(zhǔn)備、搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括PC端商城、微信公眾號網(wǎng)頁商城、后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很...

luoyibu 2019-08-02 10:48 評論0 收藏0
用vue開發(fā)一個(gè)公眾號商城SPA——1.前期準(zhǔn)備和寫頁面

摘要：使用開發(fā)公眾號商城第篇記錄項(xiàng)目準(zhǔn)備搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括端商城微信公眾號網(wǎng)頁商城后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發(fā)公眾號商城第1篇記錄項(xiàng)目準(zhǔn)備、搭建，寫頁面遇到第問題以及總結(jié)，持續(xù)更新公司最近接了個(gè)商城項(xiàng)目，包括PC端商城、微信公眾號網(wǎng)頁商城、后臺管理系統(tǒng)。這幾天在做微信公眾號商城，又新接觸了很...

snowLu 2019-08-30 15:54 評論0 收藏0