vue-piczoom

沂蒙趙發表於2018-12-28
VueOOM


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 配置

propsdescribedefault
url圖片地址string required
big-url大圖地址string null
scale圖片放大倍數number 2.5
scroll放大時頁面是否可滾動boolean fasle
show-edit是否顯示旋轉圖片按鈕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>複製程式碼


相關文章