ShutongInterconnectedChemicalCloudPlatform/src/widget/videoupload/videoUploadPlay.vue

<template>
  <!-- <p>{{ videoHeight }}</p>
  <p>{{ videoWidth }}</p> -->
  <video  
    :src="data?.control.videoMsg[0].url"
    :loop="data?.control.videoMsg[0].loop"
    :autoplay="data?.control.videoMsg[0].videoAutoPlay"

		:style="getFormItemInputStyle(configStyle,2)"
    controls
    >
  </video>
</template>

<script setup lang="ts">
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts'

const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  data: {
    type: Object,
  }
})
const configStyle = computed(() => {
	console.log("视频宽度",props.data)
    return props.data.styles || {}
})
const videoHeight = props.data?.control.videoMsg[0].videoHeight+'px'

const videoWidth = props.data?.control.videoMsg[0].videoWidth+'px'

const heightVal = ref("0px")
const widthtVal = ref("0px")

onMounted(()=>{
	heightVal.value = props.data?.control.videoMsg[0].videoHeight+'px'
	widthtVal.value = props.data?.control.videoMsg[0].videoWidth+'px'
	// console.log("视频得长款",heightVal.value, widthtVal.value,props.data?.control)
});
watch(()=>props.data?.control.videoMsg[0], (val:any) => {
	// console.log("视频得长款--》",val);
	heightVal.value = val.videoHeight+'px'
	widthtVal.value = val.videoWidth+'px'
},{
  deep: true,
})

const getFormItemInputStyle = (ele: any,sty:number) => {
    if(ele?.inputStyle){
      console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
      return AnalysisInputCss(ele?.inputStyle,sty)
    }
}
</script>

<style scoped></style>