如何利用vue3实现放大镜效果实例详解
更新时间:2021年9月20日 16:01 点击:1489
前言
逛购物网站的时候,想必大家都见过鼠标放到商品上,会有一个放大的效果。今天我们就自己动手封装一个放大镜效果的全局组件,一起来看下吧~
一、封装的意义
- 从技术角度
- 通过vue插件方式封装为全局组件,整个项目其他位置也可以使用,且使用方便
- 模块化开发思想,一个模块实现一个功能
- 用户角度
- 可以带来更好的浏览体验
- 可以看到商品的细节
二、如何封装?
1. 准备
需要用到@vueuse/core的useMouseInElement方法,所以先在项目根目录下打开终端执行如下命令
这里安装的指定版本的,各位小伙伴儿按需选择
npm install @vueuse/core@5.3.0
2. 开始封装
还是像之前的文章一样,使用vue插件的方式注册全局组件
在src/components下存放封装的全局组件,这个目录下新建enlarge-images.vue文件。
代码如下(示例):
<template> <div class="goods-image"> <!-- 预览大图 --> <div class="large" :style='[{backgroundImage: `url(${images[currIndex]})`}, bgPosition]' v-show='isShow'></div> <div class="middle" ref='target'> <!-- 左侧的大图 --> <img :src="images[currIndex]" alt=""> <!-- 遮罩层 --> <div class="layer" :style='[position]' v-show='isShow'></div> </div> <ul class="small"> <!-- 右侧的缩略图 --> <li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}"> <img @mouseenter="currIndex=i" :src="img" alt=""> </li> </ul> </div> </template> <script> import { ref, watch, reactive } from 'vue' import { useMouseInElement } from '@vueuse/core' export default { name: 'EnlargeImages', props: { images: { type: Array, default: () => [] } }, setup (props) { const currIndex = ref(0) const target = ref(null) const isShow = ref(false) // 遮罩层的坐标 const position = reactive({ left: 0, top: 0 }) // 控制背景图的位置 const bgPosition = reactive({ backgroundPositionX: 0, backgroundPositionY: 0 }) const { elementX, elementY, isOutside } = useMouseInElement(target) // 侦听鼠标移动后信息 watch([elementX, elementY, isOutside], () => { // 每次有值发生变化,就读取新的数据即可 isShow.value = !isOutside.value // 鼠标在图片的区域之外,不需要计算坐标 if (isOutside.value) return // 水平方向 if (elementX.value < 100) { // 左边界 position.left = 0 } else if (elementX.value > 300) { // 右边界 position.left = 200 } else { // 中间的状态 position.left = elementX.value - 100 } // 垂直方向 if (elementY.value < 100) { // 上边界 position.top = 0 } else if (elementY.value > 300) { // 下边界 position.top = 200 } else { // 中间的状态 position.top = elementY.value - 100 } // console.log(elementX.value, elementY.value, isOutside.value) // 计算预览大图背景的位置 bgPosition.backgroundPositionX = -position.left * 2 + 'px' bgPosition.backgroundPositionY = -position.top * 2 + 'px' // 计算左侧遮罩层位置 position.left += 'px' position.top += 'px' }) return { currIndex, target, isShow, position, bgPosition } } } </script> <style scoped lang="less"> .goods-image { box-sizing: border-box; width: 480px; height: 400px; position: relative; display: flex; z-index: 500; img { width: 100%; height: 100%; } .large { position: absolute; top: 0; left: 410px; width: 400px; height: 400px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background-repeat: no-repeat; background-size: 800px 800px; background-color: #f8f8f8; } .middle { width: 400px; height: 400px; background: #f5f5f5; position: relative; cursor: move; .layer { width: 200px; height: 200px; background: rgba(0, 0, 0, 0.2); left: 0; top: 0; position: absolute; } } .small { margin: 0; padding: 0; width: 80px; li { width: 68px; height: 68px; margin: 10px; list-style: none; cursor: pointer; &:hover, &.active { border: 2px solid #27ba9b; } } } } </style>
src/components下新建index.js
import EnlargeImages from './enlarge-images.vue' export default { install (app) { app.component(EnlargeImages.name, EnlargeImages) } }
main.js中注册为插件
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // 自己封装的 import myUI from './components' createApp(App).use(store).use(router).use(myUI).mount('#app')
3. 使用
这里借助固定的数据进行测试
代码如下(示例):
<template> <div class="home-banner"> <!-- 放大镜效果 --> <enlarge-images :images="images"/> </div> </template> <script> export default { name: 'App', setup() { const images = [ 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fcloud.jpeg', 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fground.jpeg', 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fnight.jpeg', 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fstreet.jpeg', 'https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fsun.jpeg' ] return { images } } } </script> <style lang="less"> .home-banner { width: 1000px; margin: 50px auto; } </style>
三、 效果演示
鼠标移入右侧小图片,即可切换当前显示的图片
鼠标放入左侧图片预览区,预览区内移动鼠标即可在右侧看到放大的指定区域
(PS:gif图太大了,各位看下效果图吧~)
总结
批量注册为全局组件的方式,各位可以看下vue常用工具函数这篇文章。
到此这篇关于如何利用vue3实现放大镜效果的文章就介绍到这了,更多相关vue3实现放大镜效果内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: vue3封装放大镜组件的实例代码
下一篇: 在项目中封装axios的实战过程
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来跟着小编一起看...2016-09-14
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程,各位想知道具体制作步骤的使用者们,那么下面就快阿里跟着小编一起看一...2016-09-14
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考,具体如下:这里演示双击滚屏效果代码的实现方法,不知道有觉得有用处的没,现在网上还有很多还在用这个特效的呢,代码分享给大家吧。运行效果截图如下:在线演...2015-10-30
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程,各位想知道到底该怎么调色的,那么下面就快来跟着小编一起看一看...2016-09-14
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- ps软件是现在很多人比较喜欢的,有着非常不错的使用效果,这次文章就给大家介绍下ps怎么制作图片阴影效果,还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06
- ps软件是现在很多人比较喜欢使用的,有着非常不错的功能。这次文章就给大家介绍下ps立体倒影效果制作方法,还不知道怎么制作的赶紧来看看。 最终效果  1...2017-07-06
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 本文章分享一篇关于Photoshop打造科幻片中的人物粒子化消失效果,教程重点是画笔的应用,人物身上产生的碎块,颗粒等都是用自定或下载的笔刷来完成,制作之前最好先下载一些...2016-09-14
- ps软件是现在非常受大家喜欢的一款软件,有着非常不错的制作效果。下面文章就给大家介绍下ps制作立体文字效果教程,感兴趣的一起来看看。 ps文字立体效果怎么做最终...2017-07-06
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了jQuery实现的文字hover颜色渐变效果,以完整实例形式分析了jQuery实现文字颜色渐变效果的相关技巧,涉及jQuery插件jquery-ui-1.8.16.custom.min.js的使用,需要的朋友可以参考下...2016-02-23
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 今天小编在这里给painter的这一款软件的使用者们带来的是绘制水彩油画双重效果向日葵插画的教程,各位想知道具体绘制方法的使用者,那么下面就快来跟着小编一起看一看吧...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制卡通小丑头像效果的教程,各位想知道具体制作步骤的使用者,那么下面就快来跟着小编一起看一看制作步骤...2016-09-14
- ps软件是现在很多人比较喜欢的,通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子,具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
- 背景固定效果在许多的网站都能看到,今天我们一起来看一个关于CSS制作的页面背景固定和滚动效果,应用非常的好用希望对各位带来帮助。 如何创建一个不需要Javascript...2016-09-14
- 这篇文章主要介绍了JavaScript图片旋转效果实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-29