ow

WebVue/src/components/basic/VideoPlayModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <dragModal v-model:open="visible" :width="width" :title="title" :footer="null" :mask-closable="false"
+    :fullscreen="fullscreen" wrap-class-name="vpm-wrap">
+    <div class="vpm-body">
+      <VideoPlayer :videos="videos" :start-index="startIndex" :auto-play="true" />
+    </div>
+  </dragModal>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from "@vueuse/core";
+
+import dragModal from "@/components/basic/DragModal.vue";
+import VideoPlayer from "@/components/basic/VideoPlayer.vue";
+import type { VideoItem } from "@/components/basic/VideoPlayer.vue";
+
+/** 弹出式视频播放器：与 PreviewVideo 页面同一套 VideoPlayer，只是外面套了可拖动弹窗 */
+const props = withDefaults(
+  defineProps<{
+    open?: boolean;
+    videos?: VideoItem[];
+    title?: string;
+    startIndex?: number;
+    width?: string | number;
+    fullscreen?: boolean;
+  }>(),
+  {
+    open: false,
+    videos: () => [],
+    title: "视频播放",
+    startIndex: 0,
+    width: "880px",
+    fullscreen: false,
+  },
+);
+
+const emit = defineEmits(["update:open", "close"]);
+
+const visible = useVModel(props, "open", emit);
+</script>
+
+<style scoped>
+/* VideoPlayer 内部是 flex 撑满父级；高度由下面的 vpm-wrap 样式链提供确定值 */
+.vpm-body {
+  height: 100%;
+  min-height: 240px;
+}
+</style>
+
+<style>
+/* 播放弹窗专用（通过 wrapClassName 挂到 .ant-modal-wrap 上，不影响其它弹窗）。
+   .ant-modal 默认高度是 auto，height:100% 解析不出来，之前只能用视口魔数估算，
+   结果给 footer 预留的空白去不掉；这里直接给 .ant-modal 确定高度，
+   让 DragModal 已有的 .ant-modal-content{height:100%} 和 body 的 flex:auto 生效，
+   播放器即可精确撑满标题栏以下的全部空间，拖拽改大小/全屏时也会跟着变。 */
+.ant-modal-wrap.vpm-wrap .ant-modal {
+  height: calc(100vh - 124px);
+}
+
+/* DragModal 全屏模式自带 height:100% !important，会自动覆盖上面的计算值，无需处理 */
+.ant-modal-wrap.vpm-wrap .ant-modal .ant-modal-body {
+  height: auto;
+  overflow: hidden;
+}
+</style>