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">
      <div class="preview-layer">
        <div class="pull-meta">
            <video v-if="type === MediaType.video" controls autoplay playsinline webkit-playsinline>
              <source :src="staticURL" />
            </video>
            <iframe v-else-if="type === MediaType.web" :src="staticURL"></iframe>
            <div v-if="type === MediaType.img" class="full-img pc">
              <img :src="staticURL" />
            </div>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import { ref, watchEffect, defineComponent, PropType } from 'vue'
import { getResource } from '@/env'

export enum MediaType {
  video,
  img,
  web
}

export const Preview =  defineComponent({
  name: 'static-preview',
  props: {
    url: {
      type: String as PropType<Blob | string>,
      required: true
    },
    type: {
      type: Number as PropType<MediaType>,
      required: true
    }
  },
  emits: {
    close: () => true
  },
  setup(props) {
    const staticURL = ref('')
    watchEffect(() => {
      const data = props.url
      const url = typeof data === 'string'
        ? getResource(data)
        : URL.createObjectURL(data)

      staticURL.value = url
      return () => URL.revokeObjectURL(url)
    })
    
    return {
      staticURL,
      MediaType
    }
  }
})


export default Preview
</script>

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