vue3-preview

npm install vue3-preview -S

<template>
  <div>
    <div class="images">
      <img @click="imgHandle(url)" v-for="url in imagesData" :key="url" :src="url">
    </div>
    <button @click="clickHandle">点击预览图片</button>
    <preview :urlList="imagesData" v-model="visible"></preview>
    <preview ref="preview"></preview>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Preview from 'vue3-preview';
export default defineComponent({
  name: 'App',
  components: {
    Preview
  },
  setup() {
    const preview = ref();
    const imagesData = ref([
      'http://p8.qhimg.com/bdm/1024_768_85/t01d0a11d2e93f10849.jpg',
      'http://p0.qhimg.com/bdm/1024_768_85/t0185100fadc5a11456.jpg',
      'https://blog-pro-vite.oss-cn-shanghai.aliyuncs.com/uploads/one/713591c5-153e-4675-ad82-961a1bec4692.png',
    ]);
    // 方式一
    const visible = ref(false)
    function clickHandle() {
      visible.value = true;
    }
    // 方式二
    function imgHandle(url: string) {
      preview.value?.open(url);
    }
    return {
      preview,
      imagesData,
      visible,
      clickHandle,
      imgHandle
    };
  }
})
</script>

<style scoped>
.images{
  display: flex;
}
.images img {
  width: 300px;
  height: fit-content;
  margin: 10px;
  cursor: pointer;
}
</style>