vue3——自己实现放大镜效果

最新推荐文章于 2024-08-05 22:46:18 发布

最新推荐文章于 2024-08-05 22:46:18 发布

阅读量1.3k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_57712926/article/details/120383777

版权

本文将介绍如何在 Vue3 中封装一个全局组件，实现鼠标悬停在商品图片上时显示放大的效果。首先阐述封装的意义，包括模块化开发和提升用户体验。接着详细说明封装过程，包括准备阶段、组件编写和注册。最后展示效果并进行总结。

摘要由CSDN通过智能技术生成

前言

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

一、封装的意义

从技术角度
- 通过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=