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

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

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

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

<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 放大時(shí)頁面是否可滾動(dòng) boolean fasle

Suggest 注意事項(xiàng)

組件默認(rèn)是100%的高寬,所以建議將組件包含在一個(gè)有固定高寬的容器內(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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

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

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

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

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

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

    vue中三元表達(dá)式方法例子

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

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

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

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

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

    vue3.0手動(dòng)封裝分頁組件的方法

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

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

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

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

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

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

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

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

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

最新評(píng)論