vue3封装放大镜组件

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

化身孤岛的鲸_2

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

阅读量452

点赞数 2

文章标签： css html vue.js vue

本文链接：https://blog.csdn.net/qq_44228288/article/details/120383753

版权

本文介绍了如何在Vue3中封装一个图片放大镜组件，包括组件基础结构、图片放大镜功能的实现、安装vueuse库以及功能的具体代码实现。通过使用vueuse提供的方法，实现鼠标悬停时图片放大的交互效果。

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

组件基础结构

结尾有完整代码可直接复制使用

目的：封装图片预览组件，实现鼠标悬停切换效果

在这里插入图片描述

落地代码：

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