Quantity-Creation-Management-System/src/components/dialog/VideoPreviewDialog.vue

<script setup lang="ts">
import { getAssetsImageUrl } from '@/utils/common'

// withDefaults(
//   defineProps<{
//     videoUrl: string
//   }>(),
//   {
//     videoUrl: '',
//   },
// )

// 视频弹窗可见性
const value = defineModel()
const videoUrl = defineModel('videoUrl', { default: '' })

const handleClose = () => {
  value.value = false
  videoUrl.value = ''
}
</script>

<template>
  <div class="videoPreviewDialog">
    <el-dialog
      v-model="value"
      class="naked-dialog"
      :show-close="false"
      align-center
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <template #header="{ close }">
        <div class="dialogHeader">
          <img
            :src="getAssetsImageUrl('icon' + '/dialog/dialog-close3.png')"
            @click="close"
            alt=""
            class="dialogClose"
          />
          <!--          <el-button class="dialogClose" plain @click="close" circle>-->
          <!--            X-->
          <!--          </el-button>-->
        </div>
      </template>
      <div class="video-wrapper">
        <video controls :src="videoUrl" class="fullscreen-video"></video>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
:deep(.naked-dialog) {
  background: transparent !important;
  box-shadow: none !important;

  /* 隐藏默认边框 */
  .el-dialog__header {
    /*display: none;*/
    padding-bottom: 5px;
  }

  .el-dialog__body {
    padding: 0 !important;
    background: transparent;
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dialogHeader {
  position: relative;
  width: 100%;
  height: 32px;
}

.dialogClose {
  width: 32px;
  height: 32px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.dialogClose:hover {
  /*transform: rotate(360deg);*/
  animation: rotate360 0.6s ease-in-out;
}

.video-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background: rgba(0, 0, 0, 0.4);*/
}
</style>