基于vue2.x的电商图片放大镜插件的使用
最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下。小白第一次分享,各位大神莫见笑。
vue-piczoom
picture magnifier component for Vue.js 2.x
基于vue2.x的电商图片放大镜插件
GIF 动画截图
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.x的电商图片放大镜插件的使用
最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue-piczoom picture magnifier component for Vue.js 2.x 基于vue2.x的电商图片放大镜插件 GIF 动画截图 Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save 使用 use --
-
基于vue2框架的机器人自动回复mini-project实例代码
这是一个mini-project,主要是基于vue2.0的一个移动端的机器自动回复小项目,下面是我的一个回顾总结https://github.com/xuweikang/rebotChat 1. 项目搭建 在开始该项目之前,使用vue-cli脚手架搭建整个projec //安装vue-cli npm install vue-cli //初始化项目 rebotChat是我的项目名称 vue init webpack-simple rebotChat 这样我的项目结构就出来了,如下: 2. 模拟数据
-
基于Vue2的移动端开发环境搭建详解
前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程 全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa
-
详解Weex基于Vue2.0开发模板搭建
前言 最近有一些人反馈说在面试过程中常常被问到weex相关的知识,也侧面反映的weex的发展还是很可观的,可是目前weex的开发者大多数是中小型公司或者个人,大公司屈指可数,揪其原因可能是基于weex的开发正确的姿势大家并没有找到,而且市面上的好多轮子还是.we后缀的,众所周知,weex和vue一直在努力的进行生态互通,而且weex实现web标准化是早晚的问题,今天和大家分享一下weex基于vue2.0的开发框架模板~ 工作原理 先简单熟悉一下weex的工作原理,这里引用一下weex官网上的一直
-
基于vue2.0+vuex的日期选择组件功能实现
calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--
-
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入
-
基于Vue2的独立构建与运行时构建的差别(详解)
其实这个问题在你使用vue-cli构建项目的时候是不会出现的,因为你在创建项目的构建过程中已经让你勾选了,然后会写入webpack.config.js中. 这就在这,会让你选择Vue的构建方式. 如果你勾选Runtime + Compiler就会出现如上的配置. 其实这里涉及到一个概念: 独立构建:含义是,拥有完整的模版编译功能和运行时调用功能 运行时构建:含义是,只拥有完整的运行时调用功能 为什么会有这种区分呢? 第一,因为Vue使用/运行过程分为两个阶段,第一阶段是将模版进行编译(如单个vu
-
基于Vue2.X的路由和钩子函数详解
最近上班有些忙,好久没有更新文章,也没学习新的东西. 今天来说说这个路由钩子吧. 导航和钩子函数: 导航:路由正在发生改变 关键字:路由 变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数). 钩子函数 主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做.. 导航在所有钩子 resolve 完之前一直处于 等待中,等待钩子函数告诉它下一步该怎么做.用next()来指定. 我来给大家举
-
基于vue2.0动态组件及render详解
如下所示: <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>这里是Boor</h2> <component v-bind:my-data="items" v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变! --> </compo
-
基于vue2.0实现仿百度前端分页效果附实现代码
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前设定哪些参数需要暴露出来给父组件传递 <Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jum
随机推荐
- 解析posix与perl标准的正则表达式区别
- javascript 关键字高亮显示实现代码
- 分享Oracle 11G Client 客户端安装步骤(图文详解)
- VBS教程:方法-Exists 方法
- jquery将一个表单序列化为一个对象的方法
- ASP.NET方法如何重载需要必备哪些条件
- Linux系统下PHP-FPM的安装和配置教程
- asp和php下textarea提交大量数据发生丢失的解决方法
- php中通过虚代理实现延迟加载的实现代码
- vuejs2.0运用原生js实现简单的拖拽元素功能示例
- IE及firefox下获取及设置样式值的代码
- PHP中if和or运行效率对比
- 用ASP+XML打造留言本
- 访问JSP文件或者Servlet文件时提示下载的解决方法
- sersync2 完全安装配置说明(二) 可选功能与xml高级配置
- python if not in 多条件判断代码
- Python3搜索及替换文件中文本的方法
- 主页面中的两个iframe实现鼠标拖动改变其大小
- Js检测判断URL网址输入是否正确
- JavaScript实现瀑布流以及加载效果