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


Posted in Javascript onJanuary 22, 2018

最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的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

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

Javascript 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
javascript html5实现表单验证
Mar 01 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
vue 项目常用加载器及配置详解
Jan 22 #Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 #Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
angular写一个列表的选择全选交互组件的示例
Jan 22 #Javascript
vue-router 组件复用问题详解
Jan 22 #Javascript
详解webpack多页面配置记录
Jan 22 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
类的另类用法--数据的封装
2006/10/09 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
php批量修改表结构实例
2017/05/24 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python数据结构之图的应用示例
2018/05/11 Python
django中模板的html自动转意方法
2018/05/27 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
django实现后台显示媒体文件
2020/04/07 Python
python爬虫容易学吗
2020/06/02 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Python操作Excel的学习笔记
2021/02/18 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
学期自我评价
2014/01/27 职场文书
会员活动策划方案
2014/08/19 职场文书
小升初自荐信范文
2015/03/05 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年材料员工作总结
2015/04/30 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python