vue3封装放大镜组件的实例代码
更新时间:2021年9月20日 16:00 点击:2502
组件基础结构
结尾有完整代码可直接复制使用
目的:封装图片预览组件,实现鼠标悬停切换效果
落地代码:
<template> <div class="goods-image"> <div class="middle"> <img :src="images[currIndex]" alt=""> </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 } from 'vue' export default { name: 'GoodsImage', props: { images: { type: Array, default: () => [] } }, setup (props) { const currIndex = ref(0) return { currIndex } } } </script> <style scoped lang="less"> .goods-image { width: 480px; height: 400px; position: relative; display: flex; .middle { width: 400px; height: 400px; background: #f5f5f5; } .small { width: 80px; li { width: 68px; height: 68px; margin-left: 12px; margin-bottom: 15px; cursor: pointer; &:hover,&.active { border: 2px solid @xtxColor; } } } } </style>
图片放大镜
目的:实现图片放大镜功能
步骤:
- 首先准备大图容器和遮罩容器
- 然后使用@vueuse/core的useMouseInElement方法获取基于元素的偏移量
- 计算出 遮罩容器定位与大容器背景定位 暴露出数据给模板使用
落地代码:
<template> <div class="goods-image"> + // 实现右侧大图布局效果(背景图放大4倍) + <div class="large" :style="[{backgroundImage:`url(${images[currIndex]})`}]"></div> <div class="middle"> <img :src="images[currIndex]" alt=""> + // 准备待移动的遮罩容器 + <div class="layer"></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 } from 'vue' export default { name: 'GoodsImage', props: { images: { type: Array, default: () => [] } }, setup (props) { const currIndex = ref(0) return { currIndex } } } </script> <style scoped lang="less"> .goods-image { width: 480px; height: 400px; position: relative; display: flex; + z-index: 500; + // 右侧大图样式 + .large { + position: absolute; + top: 0; + left: 412px; + 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,.2); + left: 0; + top: 0; + position: absolute; + } } .small { width: 80px; li { width: 68px; height: 68px; margin-left: 12px; margin-bottom: 15px; cursor: pointer; &:hover,&.active { border: 2px solid @xtxColor; } } } } </style>
安装vueuse
npm i @vueuse/core@5.3.0
目前5.3.0版本相对稳定
vueuse提供的监听进入指定范围方法的基本使用
import { useMouseInElement } from '@vueuse/core' const { elementX, elementY, isOutside } = useMouseInElement(target)
方法的参数target表示被监听的DOM对象;返回值elementX, elementY表示被监听的DOM的左上角的位置信息left和top;isOutside表示是否在DOM的范围内,true表示在范围之外。false表示范围内。
功能实现
<div v-if="isShow" class="large" :style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"></div> <div class="middle" ref="target"> <img :src="images[currIndex]" alt="" /> <div class="layer" v-if="isShow" :style="[position]"></div> </div> setup () { // 被监听的区域 const target = ref(null) // 控制遮罩层和预览图的显示和隐藏 const isShow = ref(false) // 定义遮罩的坐标 const position = reactive({ left: 0, top: 0 }) // 右侧预览大图的坐标 const bgPosition = reactive({ backgroundPositionX: 0, backgroundPositionY: 0 }) return { position, bgPosition, target, isShow } }
const { elementX, elementY, isOutside } = useMouseInElement(target) // 基于侦听器侦听值的变化 watch([elementX, elementY, isOutside], () => { // 通过标志位控制显示和隐藏 isShow.value = !isOutside.value if (isOutside.value) return // X方向坐标范围控制 if (elementX.value < 100) { // 左侧 position.left = 0 } else if (elementX.value > 300) { // 右侧 position.left = 200 } else { // 中间 position.left = elementX.value - 100 } // Y方向坐标范围控制 if (elementY.value < 100) { position.top = 0 } else if (elementY.value > 300) { position.top = 200 } else { position.top = elementY.value - 100 } // 计算预览大图的移动的距离 bgPosition.backgroundPositionX = -position.left * 2 + 'px' bgPosition.backgroundPositionY = -position.top * 2 + 'px' // 计算遮罩层的位置 position.left = position.left + 'px' position.top = position.top + 'px' })
完整代码
<template> <div class="goods-image"> <div v-if="isShow" class="large" :style="[{ backgroundImage: `url(${images[currIndex]})` }, bgPosition]"></div> <div class="middle" ref="target"> <img :src="images[currIndex]" alt="" /> <div class="layer" v-if="isShow" :style="[position]"></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: 'GoodsImage', 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 } 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 { width: 480px; height: 400px; position: relative; display: flex; z-index: 500; .large { position: absolute; top: 0; left: 412px; 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,.2); left: 0; top: 0; position: absolute; } } .small { width: 80px; li { width: 68px; height: 68px; margin-left: 12px; margin-bottom: 15px; cursor: pointer; &:hover, &.active { border: 2px solid @xtxColor; } } } } </style>
总结
到此这篇关于vue3封装放大镜组件的文章就介绍到这了,更多相关vue3封装放大镜组件内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: vue实现带小数点的星星评分
下一篇: 如何利用vue3实现放大镜效果实例详解
相关文章
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 在本篇内容里小编给大家分享的是关于c#使用封装方法以及相关知识点,对此有需要的朋友们可以学习下。...2020-06-25
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
- 这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了Mybatis返回结果封装map过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 这篇文章主要介绍了Vue封装全局过滤器Filters的步骤,通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2020-09-05
- 这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-23
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要介绍了Vue3.0 自己实现放大镜效果案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-07-27
- 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于Vue封装全局toast组件,需要的朋友可以参考下...2021-07-13
- 这篇文章主要给大家介绍了关于利用unity代码C#封装为dll的相关资料,文中通过图文将实现的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了vue 封装面包屑组件教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26