欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于vue2.x的電商圖片放大鏡插件的使用

 更新時間:2018年01月22日 13:55:06   作者:小包子  
本篇文章主要介紹了基于vue2.x的電商圖片放大鏡插件的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近在擼一個電商網(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

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

Demo 示例:在線示例 https://826327700.github.io/vue-piczoom/dist/

Github:https://github.com/826327700/vue-piczoom

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue結(jié)合echarts繪制一個支持切換的折線圖實例

    vue結(jié)合echarts繪制一個支持切換的折線圖實例

    這篇文章主要介紹了vue結(jié)合echarts繪制一個支持切換的折線圖實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 超簡單的Vue.js環(huán)境搭建教程

    超簡單的Vue.js環(huán)境搭建教程

    這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程,幫助大家快速搭建vue環(huán)境,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • vue中三元表達式方法例子

    vue中三元表達式方法例子

    這篇文章主要給大家介紹了關(guān)于vue中三元表達式的相關(guān)資料,眾所周知三元表達式用來根據(jù)參數(shù)的不同執(zhí)行不同的代碼是很方便的,需要的朋友可以參考下
    2023-09-09
  • 解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題

    解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題

    這篇文章主要介紹了解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue中用qrcode庫將超鏈接生成二維碼圖片的示例代碼

    vue中用qrcode庫將超鏈接生成二維碼圖片的示例代碼

    生成二維碼是一種常見的需求,無論是用于商業(yè)宣傳還是個人分享,二維碼都可以提供快速方便的方式來傳遞信息,在Vue框架中,我們可以使用qrcode庫來輕松地生成二維碼,本篇博文將介紹如何安裝qrcode庫,并通過一個實際例子來展示如何生成二維碼,需要的朋友可以參考下
    2023-12-12
  • vue3.0手動封裝分頁組件的方法

    vue3.0手動封裝分頁組件的方法

    這篇文章主要為大家詳細介紹了vue3.0手動封裝分頁組件的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 使用van-picker?動態(tài)設(shè)置當前選中項

    使用van-picker?動態(tài)設(shè)置當前選中項

    這篇文章主要介紹了使用van-picker?動態(tài)設(shè)置當前選中項方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 詳解vue中移動端自適應(yīng)方案

    詳解vue中移動端自適應(yīng)方案

    這篇文章主要介紹了vue移動端自適應(yīng),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • vue.js入門教程之基礎(chǔ)語法小結(jié)

    vue.js入門教程之基礎(chǔ)語法小結(jié)

    這篇文章我們將學習vue.js的基礎(chǔ)語法,對于大家學習vue.js具有一定的參考借鑒價值,有需要的朋友們下面來一起看看。
    2016-09-09
  • 使用VUE+iView+.Net Core上傳圖片的方法示例

    使用VUE+iView+.Net Core上傳圖片的方法示例

    這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01

最新評論