vue-piczoom
A picture magnifier component for Vue.js 2.x
基于vue2.x的電商圖片放大鏡插件
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 注意事項
組件默認是100%的高寬，所以建議將組件包含在一個有固定高寬的容器內(nèi)。如：
<div class="pic-box"> <!--pic-box:width:500px;height:500px-->
<pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
</div>
GIF 動畫截圖
zoom2.gif
