修改实时图片与视频框变动样式

src/widget/lowcodeimage/lowcodeImage.vue

@@ -29,10 +29,10 @@ const props = defineProps({
 /* 
   
 */
-let styleObject = {
-
-}
-
+let styleObject = reactive({
+  width:"0",
+  height:"0"
+})
 
 const emits = defineEmits(["update:imgUrl","updateCont"]);
 
@@ -66,8 +66,8 @@ switch (fitNum) {
     break;
 }
 
-const showMode = props.data?.control.showMode
-
+const showMode = reactive(props.data?.control.showMode)
+// console.log("图片像素样式-1-》",props.data?.control);
 if (showMode==='自定义像素值') {
   const pxWidth = props.data?.control.pxWidth
   const pxHeight = props.data?.control.pxHeight
@@ -80,6 +80,24 @@ if (showMode==='自定义像素值') {
   styleObject.height = heightPercent+'%';
 }
 
+watch(()=>props.data?.control, (val) => {
+ 
+	if (val.showMode==='自定义像素值') {
+		const pxWidth = props.data?.control.pxWidth
+		const pxHeight = props.data?.control.pxHeight
+		styleObject.width = pxWidth+'px';
+		styleObject.height = pxHeight+'px';
+	}else{
+		const widthPercent = props.data?.control.widthPercent
+		const heightPercent = props.data?.control.heightPercent
+		styleObject.width = widthPercent+'%';
+		styleObject.height = heightPercent+'%';
+	}
+},{
+  deep: true,
+})
+
+
 const radius = props.data?.control.radius
 const radiusClass = ref('');
 let radiusClassIsActive = false
@@ -188,7 +206,7 @@ watch(() =>props.imgUrl,(val)=>{
 
 </script>
 <template>
-	<div>
+	<div>{{showMode}}------》{{styleObject}}
   <!-- <img v-if="url!=errimg" referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']" @click="handleLink(props.data?.control)" /> -->
 	<el-upload
 	

src/widget/videoupload/videoUploadPlay.vue

@@ -5,7 +5,7 @@
     :src="data?.control.videoMsg[0].url"
     :loop="data?.control.videoMsg[0].loop"
     :autoplay="data?.control.videoMsg[0].videoAutoPlay"
-    :style="{height:videoHeight,width:videoWidth}"
+    :style="{height:heightVal,width:widthtVal}"
     controls
     >
   </video>
@@ -25,8 +25,21 @@ 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,
+})
 </script>
 
 <style scoped></style>