houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <ComponentContainerProperty v-model="formData.style">
3     <template #style>
4       <el-form-item label="高度" prop="height">
5         <el-slider
6           v-model="formData.style.height"
7           :max="500"
8           :min="100"
9           show-input
10           input-size="small"
11           :show-input-controls="false"
12         />
13       </el-form-item>
14     </template>
15     <el-form label-width="80px" :model="formData">
16       <el-form-item label="上传视频" prop="videoUrl">
17         <UploadFile
18           v-model="formData.videoUrl"
19           :file-type="['mp4']"
20           :limit="1"
21           :file-size="100"
22           class="min-w-80px"
23         />
24       </el-form-item>
25       <el-form-item label="上传封面" prop="posterUrl">
26         <UploadImg
27           v-model="formData.posterUrl"
28           draggable="false"
29           height="80px"
30           width="100%"
31           class="min-w-80px"
32         >
33           <template #tip> 建议宽度750 </template>
34         </UploadImg>
35       </el-form-item>
36       <el-form-item label="自动播放" prop="autoplay">
37         <el-switch v-model="formData.autoplay" />
38       </el-form-item>
39     </el-form>
40   </ComponentContainerProperty>
41 </template>
42
43 <script setup lang="ts">
44 import { VideoPlayerProperty } from './config'
45 import { usePropertyForm } from '@/components/DiyEditor/util'
46
47 // 视频播放属性面板
48 defineOptions({ name: 'VideoPlayerProperty' })
49
50 const props = defineProps<{ modelValue: VideoPlayerProperty }>()
51 const emit = defineEmits(['update:modelValue'])
52 const { formData } = usePropertyForm(props.modelValue, emit)
53 </script>
54
55 <style scoped lang="scss"></style>