最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下。小白第一次分享,各位大神莫见笑。

vue-piczoom

picture magnifier component for Vue.js 2.x

基于vue2.x的电商图片放大镜插件

GIF 动画截图

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

props describe default url 图片地址 string required big-url 大图地址 string null scale 图片放大倍数 number 2.5 scroll 放大时页面是否可滚动 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>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue2,图片放大镜,vue,放大镜插件,vue,放大镜

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“基于vue2.x的电商图片放大镜插件的使用”

暂无“基于vue2.x的电商图片放大镜插件的使用”评论...