vue3做一个功能点击图片全屏展示

要在 Vue 3 中实现点击图片全屏展示的功能，可以使用 Vue 的 ref、v-show 或者 v-if，配合 CSS 样式和全屏 API 来实现。以下是一个简单的实现步骤：

实现步骤：

1. 创建一个全屏图片组件：

   • 当用户点击图片时，将图片显示在一个全屏的遮罩层上。
   • 使用 Vue 3 的 ref 来管理图片的显示状态。

2. 使用 CSS 控制全屏显示：

   • 利用固定定位和遮罩样式来控制图片全屏的效果。

3. 关闭全屏功能：

   • 点击遮罩层或图片外的区域来关闭全屏。

代码示例：

1. 全屏展示组件 (FullScreenImage.vue)：

<template>
  <div>
    <!-- 图片列表 -->
    <img
      v-for="(image, index) in images"
      :key="index"
      :src="image"
      @click="showImage(image)"
      class="thumbnail"
    />

    <!-- 全屏显示遮罩层 -->
    <div v-if="isFullScreen" class="fullscreen-overlay" @click="closeFullScreen">
      <img :src="currentImage" class="fullscreen-image" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const images = [
  'https://tse2-mm.cn.bing.net/th/id/OIP-C.J_AW_4PUyPBsDHo68tOrlgHaEK?w=290&h=180&c=7&r=0&o=5&dpr=2.5&pid=1.7',
  'https://tse2-mm.cn.bing.net/th/id/OIP-C.J_AW_4PUyPBsDHo68tOrlgHaEK?w=290&h=180&c=7&r=0&o=5&dpr=2.5&pid=1.7',
  'https://tse2-mm.cn.bing.net/th/id/OIP-C.J_AW_4PUyPBsDHo68tOrlgHaEK?w=290&h=180&c=7&r=0&o=5&dpr=2.5&pid=1.7',
];

const isFullScreen = ref(false);
const currentImage = ref('');

// 展示全屏图片
const showImage = (image) => {
  currentImage.value = image;
  isFullScreen.value = true;
};

// 关闭全屏展示
const closeFullScreen = () => {
  isFullScreen.value = false;
};
</script>

<style scoped>
.thumbnail {
  width: 150px;
  height: auto;
  margin: 5px;
  cursor: pointer;
}

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.fullscreen-image {
  max-width: 90%;
  max-height: 90%;
}
</style>

解释：

• images 数组中包含一些图片 URL，模拟图片数据。
• 使用 v-for 指令来遍历图片，并给每个图片添加 @click 事件，触发 showImage 方法。
• 当点击图片时，将 currentImage 设置为被点击的图片 URL，并将 isFullScreen 设置为 true，显示全屏遮罩层。
• 使用 v-if 指令显示全屏遮罩层，遮罩层上的 @click 事件用来关闭全屏显示。
• 通过 CSS 控制遮罩层的样式和图片的大小。

这样，一个简单的全屏图片展示功能就完成了。如果你需要进一步优化或自定义，可以根据项目需求对代码和样式进行调整。