淘宝放大镜插件（vue-piczoom）

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>

GIF 动画截图

附：还有一个基于vue的图片放大镜插件

链接地址：放大镜

淘宝放大镜插件（vue-piczoom）相关推荐

vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件使用的话就是直接引入 import picZoom from 'vue- ...
vue仿淘宝放大镜插件的使用
1.首先下载PicZoom插件 npm install vue-piczoom --save 2.使用时注意:原来img标签要改为pic-zoom,并且属性src要改为url html部分代码: &l ...
原生JS实现简单的淘宝放大镜效果
大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址亲们可以自行更换; <!DOCTYPE html> <html> <hea ...
如何用源生js做出淘宝放大镜效果？
如何用源生js写出淘宝的放大镜效果~? 1,先写出静态界面,分别是两个div,一个div放小图片,另一个div放大图片.(当然这两张图片是一样的,只是大小不一样.) 2.大的那张图片要用backgro ...
帝国CMS淘宝客插件，帝国自动调用淘宝客插件链接自动转换
插件功能可以根据根据设置的字段自动调用淘宝客商品数量,适用于各种资讯和导购站具体看演示地址,可根据自己的样式来调用数据
原生javaScript实现淘宝放大镜效果
大家经常逛淘宝.天猫.京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果.今天闲着没事干,就打算复习一下JavaScript基础, ...
npm安装淘宝镜像安装Vue脚手架
打开CMD 命令窗口 0.安装nods.js: 官网直接下载安装, 傻瓜式安装, 直接直接下一步查看版本 1.通过cnpm使用淘宝镜像: npm install -g cnpm --registry ...
使用react完成图片放大功能(淘宝放大镜）
文章目录效果引用组件实现原理 CSS部分 React JS部分参考文章 Github源码效果引用组件 import React from 'react'; import ImageMagn ...
仿京东淘宝放大镜特效 jqzoom.js
效果图如下: HTML 文本源码: 1 <!DOCTYPE html> 2 <htmllang="en"> 3 <head> 4 <met ...

淘宝放大镜插件（vue-piczoom）

Build Setup 使用步骤

Config 配置

Suggest 注意事项

GIF 动画截图

淘宝放大镜插件（vue-piczoom）相关推荐

最新文章

热门文章