基于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

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

(0)

相关推荐

  • 基于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

随机推荐