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

617035918 發(fā)布于2019-08-22 13:55 / 962人閱讀

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

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

Config 配置

props	describe	default
url	圖片地址	string required
big-url	大圖地址	string null
scale	圖片放大倍數(shù)	number 2.5
scroll	放大時頁面是否可滾動	boolean fasle

Suggest 注意事項

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

Demo 示例

在線示例

Github

Github

update 更新記錄

1.0.4版本:(2018-01-22)
1.更換算法，解決父級元素為position:relative時定位錯誤；  
2.優(yōu)化邊緣檢測，解決放大選區(qū)移動至邊緣時，放大移動失效；  
3.優(yōu)化移動算法，移動選區(qū)更流暢；

云服務(wù)器 GPU云服務(wù)器 html圖片放大插件 js插件圖片放大 vue插件 js放大鏡插件三個圖

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92611.html

相關(guān)文章

2017年2月份前端資源分享

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

lily_wang 2019-06-27 16:28 評論0 收藏0
2017年2月份前端資源分享

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

chengjianhua 2019-08-29 12:35 評論0 收藏0
2017年2月份前端資源分享

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

Anonymous1 2019-08-20 16:31 評論0 收藏0
2017年2月份前端資源分享

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

dreamtecher 2019-08-01 16:51 評論0 收藏0
2月份前端資源分享

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

yanwei 2019-08-20 14:25 評論0 收藏0