vue3：实现图片放大浏览功能组件

最新推荐文章于 2025-09-28 14:09:07 发布

原创

最新推荐文章于 2025-09-28 14:09:07 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

两种实现方式：

1.将原本的盒子与img标签放大至全屏浏览。

2.新建一个div和img标签进行全屏浏览。这样不会改变布局。

第一种：

效果：

组件代码：

<template>
  <div :class="isScreen ? 'fullImg' : 'norImg'">
    <img
      :src="props.src"
      alt="img"
      :width="isScreen ? 'auto' : props.width"
      :height="isScreen ? 'auto' : props.height"
    />
    <!-- 放大缩小按钮 -->
    <div class="toBig" @click="showImg">
      <svg
        t="1718433997569"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2426"
        width="50"
        height="50"
      >
        <path :d="iconPath" fill="#140202" p-id="2427"></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  src: {
    type: String,
    default: "https://picsum.photos/200/300",
  },
  width: {
    type: Number,
  },
  height: {
    type: Number,
  },
});
let iconPath = ref<string>(
  "M800 163H226.2c-52.8 0-95.6 42.8-95.6 95.6v573.8c0 52.8 42.8 95.6 95.6 95.6H800c52.8 0 95.6-42.8 95.6-95.6V258.6c0-52.8-42.8-95.6-95.6-95.6zM465.3 832.4H250.8c-6.7 0-12.7-2.8-17-7.2-4.6-3.9-7.5-9.6-7.5-16.7V593.3c0-13.2 10.7-23.9 23.9-23.9s23.9 10.7 23.9 23.9l-0.8 157.2 162.3-162.3 33.8 33.8-162.6 162.6h158.5c13.2 0 23.9 10.7 23.9 23.9s-10.7 23.9-23.9 23.9zM800 497.7c0 13.2-10.7 23.9-23.9 23.9s-23.9-10.7-23.9-23.9l0.8-157.2-162.4 162.3-33.8-33.8 162.5-162.5H560.8c-13.2 0-23.9-10.7-23.9-23.9s10