最近有一個需求是要像淘寶商品詳情頁那樣,分享一下。小白第一次分享,各位大神莫見笑。
Build Setup 使用步驟
# 安裝 install
npm install vue-piczoom --save
# 使用 use
import PicZoom from 'vue-piczoom'
export default {
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 | 圖片放大倍數 | number 2.5 |
scroll | 放大時頁面是否可滾動 | boolean fasle |
Suggest 注意事項
組件默認是100%的高寬,所以建議將組件包含在一個有固定高寬的容器內。如:
<div class="pic-box"> <!--pic-box:width:500px;height:500px-->
<pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
</div>