如何利用vue3实现放大镜效果实例详解

目录

• 前言
• 一、封装的意义
• 二、如何封装？
  
• 1.  准备
  
• 2.  开始封装
  
• 3. 使用
  
• 三、 效果演示
  
• 总结

前言

逛购物网站的时候，想必大家都见过鼠标放到商品上，会有一个放大的效果。今天我们就自己动手封装一个放大镜效果的全局组件，一起来看下吧~

一、封装的意义

• 从技术角度
  • 通过vue插件方式封装为全局组件，整个项目其他位置也可以使用，且使用方便
  • 模块化开发思想，一个模块实现一个功能
• 用户角度
  • 可以带来更好的浏览体验
  • 可以看到商品的细节

二、如何封装？

1.  准备

需要用到@vueuse/core的useMouseInElement方法,所以先在项目根目录下打开终端执行如下命令

这里安装的指定版本的，各位小伙伴儿按需选择

npm install @vueuse/[email protected]

2.  开始封装

还是像之前的文章一样，使用vue插件的方式注册全局组件

在src/components下存放封装的全局组件，这个目录下新建enlarge-images.vue文件。

代码如下（示例）：

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. 使用

这里借助固定的数据进行测试

代码如下（示例）：

三、 效果演示

鼠标移入右侧小图片，即可切换当前显示的图片

鼠标放入左侧图片预览区，预览区内移动鼠标即可在右侧看到放大的指定区域

（PS：gif图太大了，各位看下效果图吧~）

总结

批量注册为全局组件的方式，各位可以看下vue常用工具函数这篇文章。

到此这篇关于如何利用vue3实现放大镜效果的文章就介绍到这了,更多相关vue3实现放大镜效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！