traffic-laser/src/components/show-hot-item/metas-mange.vue

<template>
  <div class="mates" v-if="hot.type !== 'TEXT' && hot.type !== 'AUDIO'">
    <ui-slide
      v-if="hot.meta"
      :items="hot.meta"
      :showCtrl="hot.meta.length > 1"
      :currentIndex="index"
      @change="(i) => emit('change', i)"
      :showInfos="hot.meta.length > 1 && !hideInfo"
    >
      <template v-slot="{ raw, index }">
        <div
          class="meta-item"
          :class="{ full: inFull }"
          @click="inFull && emit('pull', index)"
        >
          <img :src="getResources(raw.url)" v-if="hot.type === 'IMAGE'" />
          <video
            v-else-if="hot.type === 'VIDEO'"
            class="video"
            autoplay
            controls
            playsinline
            webkit-playsinline
          >
            <source :src="getResources(raw.url)" type="video/mp4" />
          </video>
          <div class="iframe" v-else-if="hot.type === 'WEB'">
            <iframe :src="getResources(raw.url)"> </iframe>
          </div>
        </div>
      </template>
      <template v-slot:attach="{ active }">
        <div class="file-mange">
          <slot name="icons" :active="active" />
        </div>
      </template>
    </ui-slide>
  </div>
</template>
<script setup lang="ts">
import { HotAtom } from "@/store";
import { getResources } from "@/store/app";

defineProps<{
  hot: HotAtom;
  inFull?: boolean;
  index?: number;
  hideInfo?: boolean;
}>();
const emit = defineEmits<{
  (e: "pull", index: number): void;
  (e: "change", i: number): void;
}>();
</script>

<style lang="sass" scoped>
@import './style.scss'
</style>