布局数据联动

src/components/maskedbox/layout.vue

@@ -15,8 +15,8 @@
             <div class="jAgYAh" @click="reversal('top')"></div>
           </el-tooltip>
           <div class="cPsGLK" v-else>
-            <input class="bcwrvZ_input" ref="inputRef" v-model="topNumber" type="number" @blur="handleBlur"
-              v-if="topInput">
+            <input class="bcwrvZ_input" ref="inputRef" v-model="topNumber" type="number" @input="handleInput"
+              @blur="handleBlur" v-if="topInput">
             <p class="bcwrvZ" @dblclick="handleDoubleClick('top')" v-else>{{ topNumber }}</p>
           </div>
           <!-- 右 -->
@@ -24,8 +24,8 @@
             <div class="bTzFoR" @click="reversal('right')"></div>
           </el-tooltip>
           <div class="gjYPCM" v-else>
-            <input class="cMizyy_input" ref="inputRef1" v-model="rightNumber" type="number" @blur="handleBlur"
-              v-if="rightInput">
+            <input class="cMizyy_input" ref="inputRef1" v-model="rightNumber" type="number" @input="handleInput1"
+              @blur="handleBlur" v-if="rightInput">
             <p class="cMizyy" @dblclick="handleDoubleClick('right')" v-else>{{ rightNumber }}</p>
           </div>
           <!-- 下 -->
@@ -33,8 +33,8 @@
             <div class="eIwCFM" @click="reversal('bottom')"></div>
           </el-tooltip>
           <div class="YoRMb" v-else>
-            <input class="gboeoP_input" ref="inputRef2" v-model="bottomNumber" type="number" @blur="handleBlur"
-              v-if="bottomInput">
+            <input class="gboeoP_input" ref="inputRef2" v-model="bottomNumber" type="number" @input="handleInput2"
+              @blur="handleBlur" v-if="bottomInput">
             <p class="gboeoP" @dblclick="handleDoubleClick('bottom')" v-else>{{ bottomNumber }}</p>
           </div>
           <!-- 左 -->
@@ -42,8 +42,8 @@
             <div class="fVBVzi" @click="reversal('left')"></div>
           </el-tooltip>
           <div class="ljHwKA" v-else>
-            <input class="eEegxJ_input" ref="inputRef3" v-model="leftNumber" type="number" @blur="handleBlur"
-              v-if="leftInput">
+            <input class="eEegxJ_input" ref="inputRef3" v-model="leftNumber" type="number" @input="handleInput3"
+              @blur="handleBlur" v-if="leftInput">
             <p class="eEegxJ" @dblclick="handleDoubleClick('left')" v-else>{{ leftNumber }}</p>
           </div>
           <!-- 视图盒子 -->
@@ -54,10 +54,12 @@
       <div class="center_in_column" style="margin-left: 11px;">
         <div class="kdbebz">
           <el-tooltip content="固定宽度" placement="top">
-            <div :class="fixedWidth ? 'kEmrUa' : 'hIrtuZ'" @click="getFixedWidth"></div>
+            <div :style="{ pointerEvents: !configList.resizable ? 'none' : 'auto' }"
+              :class="fixedWidth ? 'kEmrUa' : 'hIrtuZ'" @click="getFixedWidth"></div>
           </el-tooltip>
           <el-tooltip content="固定高度" placement="top">
-            <div :class="fixedHeight ? 'hXQonZ' : 'tOPsm'" @click="getFixedHeight"></div>
+            <div :style="{ pointerEvents: !configList.resizable ? 'none' : 'auto' }"
+              :class="fixedHeight ? 'hXQonZ' : 'tOPsm'" @click="getFixedHeight"></div>
           </el-tooltip>
         </div>
         <div class="iUnNSJ">固定尺寸</div>
@@ -67,8 +69,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
+import { ref, watch } from "vue";
+const props = defineProps({
+  configData: {
+    type: Object,
+    required: true
+  },
+  cssData: {
+    type: Object,
+    required: true
+  },
+})
+const configList: any = ref({})
+const cssList: any = ref({})
 // 固定宽度
 const fixedWidth = ref(true)
 // 固定高度
@@ -76,24 +89,35 @@ const fixedHeight = ref(true)
 // 固定顶部
 const topFlag = ref(false)
 const topInput = ref(false)
-const topNumber: any = ref(22)
+const topNumber: any = ref()
 // 固定右侧
 const rightFlag = ref(true)
 const rightInput = ref(false)
-const rightNumber: any = ref(22)
+const rightNumber: any = ref()
 // 固定底部
 const bottomFlag = ref(true)
 const bottomInput = ref(false)
-const bottomNumber: any = ref(22)
+const bottomNumber: any = ref()
 // 固定左侧
 const leftFlag = ref(false)
 const leftInput = ref(false)
-const leftNumber: any = ref(22)
-
+const leftNumber: any = ref()
+// 控制上下左右输入框自动聚焦
 const inputRef = ref<HTMLInputElement | null>(null);
 const inputRef1 = ref<HTMLInputElement | null>(null);
 const inputRef2 = ref<HTMLInputElement | null>(null);
 const inputRef3 = ref<HTMLInputElement | null>(null);
+
+watch(() => [props.configData, props.cssData], (newValue) => {
+  if (newValue) {
+    configList.value = newValue[0]
+    cssList.value = newValue[1]
+    topNumber.value = cssList.value.top
+    leftNumber.value = cssList.value.left
+    fixedWidth.value = configList.value.fixedWidth
+    fixedHeight.value = configList.value.fixedHeight
+  }
+}, { immediate: true, deep: true })
 // 双击输入框获取焦点
 function handleDoubleClick(params: any) {
   if (params == 'top') {
@@ -126,6 +150,7 @@ function handleDoubleClick(params: any) {
     })
   }
 }
+const emit = defineEmits(['update:configData', 'update:cssData',]);
 // 失去焦点
 function handleBlur() {
   topInput.value = false
@@ -133,9 +158,28 @@ function handleBlur() {
   bottomInput.value = false
   leftInput.value = false
 }
+function handleInput(event: any) {
+  const input = event.target as HTMLInputElement;
+  console.log('Input value changed to:', input.value);
+}
+function handleInput1(event: any) {
+  console.log(event, 6767);
+
+}
+function handleInput2(event: any) {
+  console.log(event, 6767);
+
+}
+function handleInput3(event: any) {
+  console.log(event, 6767);
+
+}
 // 固定宽度
 function getFixedWidth() {
   if (fixedWidth.value) {
+    let num = 375 - cssList.value.left - cssList.value.width
+    console.log(num, cssList.value.left, cssList.value.width);
+    rightNumber.value = num
     fixedWidth.value = false
     rightFlag.value = false
     leftFlag.value = false
@@ -144,6 +188,8 @@ function getFixedWidth() {
     rightFlag.value = true
     leftFlag.value = false
   }
+  configList.value.fixedWidth = fixedWidth.value
+  emit('update:configData', configList);
 }
 // 固定高度
 function getFixedHeight() {
@@ -156,6 +202,8 @@ function getFixedHeight() {
     topFlag.value = false
     bottomFlag.value = true
   }
+  configList.value.fixedHeight = fixedHeight.value
+  emit('update:configData', configList);
 }
 //反转/切换
 function reversal(params: any) {
@@ -616,4 +664,5 @@ input[type="number"]:focus {
   margin-top: 8px;
   text-align: center;
   transform: scale(0.85);
-}</style>
+}
+</style>

src/components/widgets/getWidget.ts

@@ -5,7 +5,6 @@ for (let each in modules) {
     const name = (modules[each] as any).default.__name
     gets[name] = (modules[each] as any).default
 }
-
-console.log(gets);
+// console.log(gets);
 
 export default gets

src/module/config/button.ts

@@ -4,11 +4,13 @@ const btnConfig = {
     isResizable: true, //禁止缩放
     aspectRatio: false, //禁止等比例缩放
     resizable: true, //禁止调整大小
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
 }
 
 const btnCss = {
-    top: 577,
-    left: 142.5,
+    top: 0,
+    left: 0,
     width: 125,
     height: 45,
     borderRadius: 24,

src/module/config/icon.ts

@@ -4,6 +4,8 @@ const iconConfig = {
     isResizable: true, //禁止缩放
     aspectRatio: false, //禁止等比例缩放
     resizable: true, //禁止调整大小
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
 }
 
 const iconCss = {

src/module/config/picture.ts

@@ -4,7 +4,9 @@ const pictureConfig = {
     aspectRatio: false, //禁止等比例缩放
     resizable: true, //禁止调整大小
     pictureMode: 'contain',//适应contain，fill拉伸
-    picture: '',
+    picture: '', //图片地址名称
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
 }
 
 const pictureCss = {

src/module/config/sceneButton.ts

@@ -7,16 +7,19 @@ const sceneConfig = {
     isResizable: true, //禁止缩放
     // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
     aspectRatio: false, //禁止等比例缩放
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
 }
 
 const sceneCss = {
-    top: 577,
-    left: 142.5,
+    top: 0,
+    left: 0,
     width: 90,
     height: 90,
+    iconSize: 27,
     borderRadius: 8,
     iconColor: "rgba(21, 140, 251, 1)",
-    backgroundColor: '#fff',
+    backgroundColor: 'rgba(255, 255, 255, 1)',
     fontWeight: 500,
     textAlign: 'center',
 }

src/module/config/switch.ts

@@ -4,6 +4,8 @@ const switchConfig = {
     aspectRatio: false, //禁止等比例缩放
     draggable: true, //组件是否可拖动
     resizable: false, //禁止调整大小
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
 }
 
 const switchCss = {

src/module/config/text.ts

@@ -7,6 +7,8 @@ const TextConfig = {
     sticks: ['mr', 'ml'],
     resizable: true, //禁止调整大小
     aspectRatio: false, //禁止等比例缩放
+    fixedWidth: true, //固定宽度
+    fixedHeight: true, //固定高度
 }
 
 const TextCss = {

src/views/HomeView.vue

@@ -222,8 +222,8 @@ const onEnd = (value) => {
   if (value.originalEvent.cancelable && value.to.className == 'Bzuil') {
     const num = (375 / 2) - (cloneItem.value.css.width / 2)
     cloneItem.value.css.left = num
-    cloneItem.value.active = true
     cloneItem.value.css.top = value.originalEvent.offsetY
+    cloneItem.value.active = true
     const arr = JSON.parse(JSON.stringify(cloneItem.value))
 
     extraImgs1.value.push(arr)

src/views/maskedbox.vue

@@ -1,6 +1,7 @@
 <!-- 样式编辑控件 -->
 <template>
-    <layout></layout>
+    <layout v-if="config.config.fixedWidth && config.config.fixedHeight" v-model:configData="config.config"
+        v-model:cssData="config.css"></layout>
     <div class="box_padding" v-if="config.css">
         <div class="same_row_in">
             <span class="default_size title_5">基础设置</span>
@@ -10,7 +11,7 @@
         </div>
         <div v-if="basicFlag" class="card_second_level">
             <digitalSlider v-if="config.config.size" v-model:num="config.config.size" title="层级"></digitalSlider>
-            <patternMode v-model:mode="config.config.pictureMode"></patternMode>
+            <patternMode v-if="config.config.pictureMode" v-model:mode="config.config.pictureMode"></patternMode>
             <literalName v-if="'name' in config.config" v-model:name="config.config.name"></literalName>
             <boxSize v-if="config.css.width && config.css.height != 'auto' && config.css.height && config.config.resizable"
                 v-model:width="config.css.width" v-model:height="config.css.height"></boxSize>
@@ -19,12 +20,14 @@
             </colorSelection>
             <colorSelection v-if="config.css.colorClose" v-model:iconColor="config.css.colorClose" title="颜色(关)">
             </colorSelection>
+            <colorSelection v-if="config.css.backgroundColor" v-model:iconColor="config.css.backgroundColor" title="颜色">
+            </colorSelection>
+            <digitalSlider v-if="'borderRadius' in config.css" v-model:num="config.css.borderRadius" title="圆角">
+            </digitalSlider>
             <fontSize v-if="config.css.fontSize && config.css.fontWeight" v-model:fontSize="config.css.fontSize"
                 v-model:fontWeight="config.css.fontWeight"></fontSize>
             <textAlignment v-if="config.css.textAlign" v-model:align="config.css.textAlign"></textAlignment>
             <lineNumber v-if="'lineNum' in config.config" v-model:num="config.config.lineNum"></lineNumber>
-            <digitalSlider v-if="'borderRadius' in config.css" v-model:num="config.css.borderRadius" title="圆角">
-            </digitalSlider>
             <digitalSlider v-if="'opacity' in config.css" v-model:num="config.css.opacity" :min="0" :max="1" :step="0.1"
                 title="透明度">
             </digitalSlider>
@@ -45,23 +48,6 @@
                 v-model:iconName="config.config.img" @mousedown.stop @childEvent="childEvent"></iconSize>
             <colorSelection v-if="'iconColor' in config.css" v-model:iconColor="config.css.iconColor" title="选择颜色">
             </colorSelection>
-            <textAlignment v-if="'textAlign' in config.css" v-model:align="config.css.textAlign"></textAlignment>
-            <lineNumber v-if="'lineNum' in config.config" v-model:num="config.config.lineNum"></lineNumber>
-        </div>
-    </div>
-    <div class="box_padding" v-if="'backgroundColor' in config.css && 'borderRadius' in config.css">
-        <div class="same_row_in">
-            <span class="default_size title_5">背景</span>
-            <el-icon style="cursor: pointer;" :class="backgroundFlag ? '' : 'putAway'"
-                @click="getbasicSetting('background')">
-                <ArrowDown />
-            </el-icon>
-        </div>
-        <div v-if="backgroundFlag" class="card_second_level">
-            <digitalSlider v-if="'borderRadius' in config.css" v-model:num="config.css.borderRadius" title="圆角">
-            </digitalSlider>
-            <colorSelection v-if="config.css.backgroundColor" v-model:iconColor="config.css.backgroundColor" title="颜色">
-            </colorSelection>
         </div>
     </div>
     <div class="box_padding" v-if="'picture' in config.config">