appFormLowcode/src/components/lowCode/assistant/videoUpAndPlay.vue

<!--
@ 作者: 秦东
@ 时间: 2024-11-17 15:15:41
@ 备注: 视频
-->
<script lang='ts' setup>
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
const props = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  data: {
    type: Object,
  },
  valInfo: {
    type: String,
  },
})
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)
    }
}
const openVideo = () => {
  console.log("单机播放")
}

const imgUrl = computed({
  get() {
    if (props.valInfo != "") {
      return props.valInfo;
    } else {
      return props.data?.control.videoMsg[0].url;
    }
  },
  set(val: any) {
    emits("update:valInfo", val);
  },
});
</script>
<template>
  <div class="butBox" @click="openVideo">按钮</div>
  <div>
    <video  
      
        :loop="data?.control.videoMsg[0].loop"
        :autoplay="data?.control.videoMsg[0].videoAutoPlay"

            :style="getFormItemInputStyle(configStyle,2)"
            controls
        >
        <source :src="imgUrl" type="video/mp4">

        您的浏览器不支持 HTML5 标签
    </video>
    
  </div>
</template>
<style  lang='scss' scoped>
.butBox{
  width:150px;
  height: 50px;
  background-color: #FB041A;
  display:none;
}
</style>