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

vue-piczoom

A picture magnifier component for Vue.js 2.x
基于vue2.x的电商图片放大镜插件

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 图片放大倍数 number 2.5
scroll 放大时页面是否可滚动 boolean fasle

Suggest 注意事项

组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内。如:

GIF 动画截图

zoom2.gif

Demo 示例

在线示例

你可能感兴趣的:([vue插件]基于vue2.x的电商图片放大镜插件)