uniapp中写一个组件,通过父组件传入路径数组在子组件中展示图片,单击其中一张图片可以进行放大缩小,且可以通过图片路径解析出文件名称显示到图片的上方

在uni-app中创建一个自定义组件，用于展示图片并实现点击放大缩小的功能，可以遵循以下步骤：

1. 创建组件文件：首先，在你的uni-app项目中创建一个新的组件文件，例如`ImageGallery.vue`。

2. 定义组件属性：在组件的`<script>`部分定义一个属性来接收父组件传入的图片路径数组，例如`imageUrls`。

3. 创建图片列表：使用`v-for`指令在模板中渲染图片列表，并为每张图片绑定点击事件，以实现点击图片进行放大缩小的功能。

4. 图片点击事件处理：编写点击事件处理函数，用于切换图片的显示状态，并实现放大和缩小的效果。可以使用uni-app的`<transition>`组件来实现图片的平滑过渡效果。

5. 显示文件名：在图片上方添加文本标签，通过计算属性或方法解析图片的文件名，并显示出来。

6. 样式调整：根据需要调整图片的样式，确保图片能够正确显示，并且在放大时覆盖其他内容。

下面是一个简单的组件示例代码：

<template>
  <view>
    <image
      v-for="(item, index) in imageUrls"
      :key="index"
      :src="item"
      @click="handleImageClick(index)"
      class="image"
    />
    <text class="filename" v-if="currentImageIndex !== null">
      {{ currentImageUrl.split('/').pop() }}
    </text>
  </view>
</template>

<script>
export default {
  props: {
    imageUrls: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentImageIndex: null
    };
  },
  methods: {
    handleImageClick(index) {
      this.currentImageIndex = index;
      // 这里可以添加放大缩小图片的逻辑
    }
  }
};
</script>

<style>
.image {
  width: 100px;
  height: 100px;
  margin: 10px;
  /* 其他图片样式 */
}
.filename {
  position: absolute;
  top: 0;
  /* 根据需要调整位置和样式 */
}
</style>

在父组件中，你可以这样使用这个组件：

<template>
  <view>
    <image-gallery :imageUrls="imageList"></image-gallery>
  </view>
</template>

<script>
import ImageGallery from '@/components/ImageGallery.vue';
export default {
  components: {
    ImageGallery
  },
  data() {
    return {
      imageList: [
        '/path/to/image1.jpg',
        '/path/to/image2.png',
        // 其他图片路径
      ]
    };
  }
};
</script>