uni-starter/src/components/MImage/index.vue

<!--
 * @Author: wjc
 * @Date: 2025-04-09 10:19:11
 * @LastEditors: wjc
 * @LastEditTime: 2026-01-16 14:28:09
 * @Description: 自定义图片预览组件
-->
<template>
  <nut-image-preview :show="show" :images="images" @close="onClose" />
  <image mode="aspectFit" @click="onShow" />
</template>

<script setup lang="ts">
  defineOptions({
    name: 'MImage',
    options: {
      styleIsolation: 'shared',
      virtualHost: true,
    },
  })
  const props = withDefaults(
    defineProps<{
      src: string[]
    }>(),
    {
      src: () => [],
    }
  )

  watchEffect(() => {
    images.value = props.src.map((item) => {
      return {
        src: item,
      }
    })
  })

  const images = ref([])
  const show = ref(false)
  const onShow = () => {
    show.value = true
  }
  const onClose = () => {
    show.value = false
  }
</script>