基于vue2.x的電商圖片放大鏡插件的使用
更新時(shí)間：2018年01月22日 13:55:06 作者：小包子
本篇文章主要介紹了基于vue2.x的電商圖片放大鏡插件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
最近在擼一個(gè)電商網(wǎng)站，有一個(gè)需求是要像淘寶商品詳情頁那樣，鼠標(biāo)放在主圖上，顯示圖片放大鏡效果，找了一下貌似沒有什么合適的vue插件，于是自己擼了一個(gè)，分享一下。小白第一次分享，各位大神莫見笑。
vue-piczoom
picture magnifier component for Vue.js 2.x
基于vue2.x的電商圖片放大鏡插件
GIF 動(dòng)畫截圖
Build Setup 使用步驟
# 安裝 install npm install vue-piczoom --save
使用 use
--script
import PicZoom from 'vue-piczoom'
export default {
name: 'App',
components: {
PicZoom
}
}
--html
<pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
Config 配置
| props | describe | default |
|---|---|---|
| url | 圖片地址 | string required |
| big-url | 大圖地址 | string null |
| scale | 圖片放大倍數(shù) | number 2.5 |
| scroll | 放大時(shí)頁面是否可滾動(dòng) | boolean fasle |
Suggest 注意事項(xiàng)
組件默認(rèn)是100%的高寬，所以建議將組件包含在一個(gè)有固定高寬的容器內(nèi)。如：
<div class="pic-box"> <!--pic-box:width:500px;height:500px--> <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom> </div>
Demo 示例：在線示例 https://826327700.github.io/vue-piczoom/dist/
Github：https://github.com/826327700/vue-piczoom
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例
這篇文章主要介紹了vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家分享了一份超簡(jiǎn)單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關(guān)于vue中三元表達(dá)式的相關(guān)資料,眾所周知三元表達(dá)式用來根據(jù)參數(shù)的不同執(zhí)行不同的代碼是很方便的,需要的朋友可以參考下2023-09-09
解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題
這篇文章主要介紹了解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中用qrcode庫(kù)將超鏈接生成二維碼圖片的示例代碼
生成二維碼是一種常見的需求,無論是用于商業(yè)宣傳還是個(gè)人分享,二維碼都可以提供快速方便的方式來傳遞信息,在Vue框架中,我們可以使用qrcode庫(kù)來輕松地生成二維碼,本篇博文將介紹如何安裝qrcode庫(kù),并通過一個(gè)實(shí)際例子來展示如何生成二維碼,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue3.0手動(dòng)封裝分頁組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue移動(dòng)端自適應(yīng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章我們將學(xué)習(xí)vue.js的基礎(chǔ)語法，對(duì)于大家學(xué)習(xí)vue.js具有一定的參考借鑒價(jià)值，有需要的朋友們下面來一起看看。2016-09-09
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01