vue2.x中圖片放大鏡外掛程式如何使用？

本篇文章主要介紹了基於vue2.x的電商圖片放大鏡插件的使用，現在分享給大家，也給大家做個參考。

最近在擼一個電商網站，有一個需求是要像淘寶商品詳情頁那樣，滑鼠放在主圖上，顯示圖片放大鏡效果，找了一下貌似沒有什麼合適的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 設定

##describedefaulturl圖片位址string required## big-url#scale##number 2.5 scroll放大時頁面是否可捲動boolean fasle# #Suggest 注意事項

props
大圖位址	string null
圖片放大倍率

元件預設是100%的高寬，所以建議將元件包含在一個有固定高寬的容器內。如：

 
  <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在vue中如何才能實現前進刷新後退不刷新效果

在Vue2.5中通過Table 和Pagination 元件如何實現分頁功能

在Laravel如何整合Bootstrap 4？

在jquery中如何取得select標籤中的option值

使用js如何為select動態新增option（詳細教學）

在nodejs中連接MySQL（詳細教學）

使用vue.js如何實現無縫捲動效果

在vue中使用路由實作頁面重新整理

jQuery實作遞歸無限層功能

以上是vue2.x中圖片放大鏡外掛程式如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！