国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

617035918 / 902人閱讀

摘要：基于的電商圖片放大鏡插件動(dòng)畫截圖使用步驟安裝使用配置圖片地址大圖地址圖片放大倍數(shù)放大時(shí)頁面是否可滾動(dòng)注意事項(xiàng)組件默認(rèn)是的高寬，所以建議將組件包含在一個(gè)有固定高寬的容器內(nèi)。

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

vue-piczoom 
picture magnifier component for Vue.js 2.x
基于vue2.x的電商圖片放大鏡插件
GIF 動(dòng)畫截圖

Build Setup 使用步驟 
# 安裝 install
npm install vue-piczoom --save
# 使用 use
--script
import PicZoom from "vue-piczoom"
export default {
  name: "App",
  components: {
    PicZoom
  }
}

--html
Config 配置
props describe default
url 圖片地址 string required
big-url 大圖地址 string null
scale 圖片放大倍數(shù) number 2.5
scroll 放大時(shí)頁面是否可滾動(dòng) boolean fasle
Suggest 注意事項(xiàng)

組件默認(rèn)是100%的高寬，所以建議將組件包含在一個(gè)有固定高寬的容器內(nèi)。如：
Demo 示例

在線示例

Github

Github

update 更新記錄 
1.0.4版本:(2018-01-22)

1.更換算法，解決父級(jí)元素為position:relative時(shí)定位錯(cuò)誤；  
2.優(yōu)化邊緣檢測(cè)，解決放大選區(qū)移動(dòng)至邊緣時(shí)，放大移動(dòng)失效；  
3.優(yōu)化移動(dòng)算法，移動(dòng)選區(qū)更流暢；

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/92611.html

相關(guān)文章

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    lily_wang 評(píng)論0 收藏0

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    chengjianhua 評(píng)論0 收藏0

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    Anonymous1 評(píng)論0 收藏0

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    dreamtecher 評(píng)論0 收藏0

  • 2月份前端資源分享

    摘要：月份前端資源分享更多資源請(qǐng)文章轉(zhuǎn)自前端生成好看的二維碼十大經(jīng)典排序算法帶動(dòng)圖演示為什么知乎前端圈普遍認(rèn)為游戲和展示的個(gè)人整理和封裝的庫中文詳細(xì)注釋供新手學(xué)習(xí)使用擴(kuò)展語法記錄掉坑初期工具漢字拼音轉(zhuǎn)換工具實(shí)現(xiàn)漢字轉(zhuǎn)拼音的插件下拉列表支持拼音簡(jiǎn) 2月份前端資源分享 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github...

    yanwei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<