基于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 相关文章推荐
javascript的函数
Jan 31 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
Bootstrap插件全集
Jul 18 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
安装vue-cli的简易过程
May 22 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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解析目录路径的3个函数总结
2014/11/18 PHP
帝国cms常用标签汇总
2015/07/06 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
js使用心得分享
2015/01/13 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python 公共方法汇总解析
2019/09/16 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
期终自我鉴定
2014/02/17 职场文书
《云房子》教学反思
2014/04/20 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
英语读书笔记
2015/07/02 职场文书
校园安全教育心得体会
2016/01/15 职场文书
初中思品教学反思
2016/02/20 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技