基于vue2.x的電商圖片放大鏡插件的使用

更新時間：2018年01月22日 13:55:06 作者：小包子

本篇文章主要介紹了基于vue2.x的電商圖片放大鏡插件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近在擼一個電商網(wǎng)站，有一個需求是要像淘寶商品詳情頁那樣，鼠標(biāo)放在主圖上，顯示圖片放大鏡效果，找了一下貌似沒有什么合適的vue插件，于是自己擼了一個，分享一下。小白第一次分享，各位大神莫見笑。

vue-piczoom

picture magnifier component for Vue.js 2.x

基于vue2.x的電商圖片放大鏡插件

GIF 動畫截圖

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	放大時頁面是否可滾動	boolean fasle

Suggest 注意事項

組件默認(rèn)是100%的高寬，所以建議將組件包含在一個有固定高寬的容器內(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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue結(jié)合echarts繪制一個支持切換的折線圖實例
這篇文章主要介紹了vue結(jié)合echarts繪制一個支持切換的折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
超簡單的Vue.js環(huán)境搭建教程
這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
vue中三元表達(dá)式方法例子
這篇文章主要給大家介紹了關(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未定義的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue中用qrcode庫將超鏈接生成二維碼圖片的示例代碼
生成二維碼是一種常見的需求,無論是用于商業(yè)宣傳還是個人分享,二維碼都可以提供快速方便的方式來傳遞信息,在Vue框架中,我們可以使用qrcode庫來輕松地生成二維碼,本篇博文將介紹如何安裝qrcode庫,并通過一個實際例子來展示如何生成二維碼,需要的朋友可以參考下
2023-12-12
vue3.0手動封裝分頁組件的方法
這篇文章主要為大家詳細(xì)介紹了vue3.0手動封裝分頁組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
使用van-picker?動態(tài)設(shè)置當(dāng)前選中項
這篇文章主要介紹了使用van-picker?動態(tài)設(shè)置當(dāng)前選中項方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解vue中移動端自適應(yīng)方案
這篇文章主要介紹了vue移動端自適應(yīng)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue.js入門教程之基礎(chǔ)語法小結(jié)
這篇文章我們將學(xué)習(xí)vue.js的基礎(chǔ)語法，對于大家學(xué)習(xí)vue.js具有一定的參考借鑒價值，有需要的朋友們下面來一起看看。
2016-09-09
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01