fuse-code/src/components/static-preview/index.vue

<template>
  <teleport to="body">
    <span class="close pc" @click="$emit('close')">
      <ui-icon type="close" ctrl />
    </span>
    <div class="pull-preview pc">
      <ui-slide
        v-if="items.length > 1"
        :currentIndex="current"
        showCtrl
        :items="items"
        showInfos
      >
        <template v-slot="{ raw }">
          <Sign :media="raw" />
        </template>
      </ui-slide>
      <Sign :media="items[0]" v-else />
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import Sign from "./sign.vue";
import { MetaType } from "@/utils";

export type MediaItem = {
  url: Blob | string;
  type?: MetaType;
};

export const Preview = defineComponent({
  name: "static-preview",
  props: {
    items: {
      type: Array as PropType<MediaItem[]>,
      required: true,
    },
    current: {
      type: Number,
      default: 1,
    },
  },
  emits: {
    close: () => true,
  },
  components: {
    Sign,
  },
});

export default Preview;
</script>

<style scoped lang="scss" src="./style.scss"></style>