布局输入修改、单个删除、禁用

src/components/colorPicker.vue

@@ -121,8 +121,7 @@ let blue: any = ref(0)
 let alpha: any = ref(1)
 
 onMounted(() => {
-    console.log('parseColor(props.color)', parseColor(props.color))
-
+    // console.log('parseColor(props.color)', parseColor(props.color))
     let { r, g, b, a }: any = parseColor(props.color)
     red.value = r
     green.value = g
@@ -177,8 +176,8 @@ let colorEnums = computed(() => {
 
 // 确认选中的颜色值
 const handleConfirm = () => {
-    console.log('props.mode', props.mode)
-    console.log('handleConfirm', (colorEnums.value as any)[props.mode])
+    // console.log('props.mode', props.mode)
+    // console.log('handleConfirm', (colorEnums.value as any)[props.mode])
     emits('update:color', (colorEnums.value as any)[props.mode])
     emits('handleConfirm', (colorEnums.value as any)[props.mode])
 }
@@ -338,11 +337,11 @@ function parseColor(color) {
             if (/^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(color)) {
                 return hex2rgba(color)
             } else if (color.includes('linear-gradient')) {
-                console.log('111parseColor111', color)
+                // console.log('111parseColor111', color)
                 let matchColors = color.match(/#[0-9a-fA-F]{6}/g)
-                console.log('matchColors', matchColors)
+                // console.log('matchColors', matchColors)
                 let avgColor = getAvgColor(matchColors)
-                console.log('avgColor', avgColor)
+                // console.log('avgColor', avgColor)
                 return hex2rgba(avgColor)
             }
         } else {
@@ -442,7 +441,7 @@ function rgba2hex(r, g, b, a: any = 1) {
 }
 
 function hex2rgba(s) {
-    console.log('111111', s)
+    // console.log('111111', s)
     if (/^#?[0-9a-fA-F]{3}$/.test(s)) {
         let b = s.substring(s.length - 1, s.length)
         let g = s.substring(s.length - 2, s.length - 1)

src/components/drag/resizable.vue

@@ -4,8 +4,11 @@
         v-model:w="w" v-model:h="h" v-model:active="active" :handles="sticks" :draggable="draggable" :resizable="resizable"
         @drag-start="print('drag-start')" @resize-start="print('resize-start')" @resizing="print('resizing')"
         @dragging="print('dragging')" @drag-end="print('drag-end')" @resize-end="print('resize-end')" @activated="activated"
-        @deactivated="deactivated">
+        @deactivated="deactivated" @click.native="clickHandler">
         <component :is="getWidget(currentItem.type)" :config="currentItem"></component>
+        <div class="card_lock center_in" v-if="active && lock">
+            <span class="iconfont lock_icon_img icon-suoding"></span>
+        </div>
     </Vue3DraggableResizable>
 </template>
 
@@ -13,7 +16,7 @@
 import getName from '../widgets/getWidget';
 import Vue3DraggableResizable from 'vue3-draggable-resizable'
 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 const initW = ref(0)
 const initH = ref(0)
 const w = ref(0)
@@ -21,8 +24,25 @@ const h: any = ref(null)
 const top = ref(0)
 const left = ref(0)
 const isResizable = ref(false) //禁止缩放
-const draggable = ref(false) // 组件是否可拖动
-const resizable = ref(false) // 组件是否可调整大小
+const draggable1 = ref(true) //默认true允许
+const resizable1 = ref(true) //默认true允许
+const lock = ref(false) // 组件是否锁定
+// 组件是否可拖动
+const draggable = computed(() => {
+    if (lock.value) {
+        return false
+    } else {
+        return draggable1.value
+    }
+});
+// 组件是否可调整大小
+const resizable = computed(() => {
+    if (lock.value) {
+        return false
+    } else {
+        return resizable1.value
+    }
+});
 const sticks = ref([])
 const active = ref(true)
 const currentItem: any = ref({})
@@ -43,8 +63,11 @@ watch(() => props.dargData, (newValue) => {
         h.value = newValue.css.height
         top.value = newValue.css.top
         left.value = newValue.css.left
-        draggable.value = newValue.config.draggable
-        resizable.value = newValue.config.resizable
+        if (newValue.config.draggable) {
+            draggable1.value = newValue.config.draggable
+        }
+        resizable1.value = newValue.config.resizable
+        lock.value = newValue.config.lock
         isResizable.value = newValue.config.isResizable
         sticks.value = newValue.config.sticks
         active.value = newValue.active
@@ -52,7 +75,7 @@ watch(() => props.dargData, (newValue) => {
 }, { immediate: true, deep: true })
 
 // 子传父
-const emit = defineEmits(['passId', 'modifiedItem', 'inactivation']);
+const emit = defineEmits(['passId', 'modifiedItem', 'inactivation', 'clickHandler']);
 // 修改项
 function print(val) {
     currentItem.value.css.width = w.value
@@ -81,6 +104,16 @@ function activated() {
 function deactivated() {
     emit('inactivation', currentItem.value);
 }
+// 点击激活
+function clickHandler() {
+    active.value = true
+    const arr = {
+        index: props.index,
+        soleId: props.dargData.soleId,
+        option: currentItem.value
+    }
+    emit('clickHandler', arr);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -91,4 +124,20 @@ function deactivated() {
 .forceAutoHeight {
     height: auto !important;
 }
+
+.vdr-container.active {}
+
+.card_lock {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    background-color: #409EFF,
+}
+
+.lock_icon_img {
+    color: #ffffff;
+    font-size: 15px;
+}
 </style>

src/components/maskedbox/colorSelection.vue

@@ -105,7 +105,7 @@ function formattedColor(rgbaStr: string): string {
 }
 watch(() => props.iconColor, (newValue) => {
     if (newValue) {
-        console.log(newValue, 25);
+        // console.log(newValue, 25);
         iconColoril.value = newValue;
         // 初始化hex颜色
         hexColor.value = handleColorChange(newValue)

src/components/maskedbox/layout.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 const props = defineProps({
   configData: {
     type: Object,
@@ -89,19 +89,35 @@ const fixedHeight = ref(true)
 // 固定顶部
 const topFlag = ref(false)
 const topInput = ref(false)
-const topNumber: any = ref()
+const topNum: any = ref()
+const topNumber = computed(() => {
+  topNum.value = cssList.value.top
+  return topNum.value
+});
 // 固定右侧
 const rightFlag = ref(true)
 const rightInput = ref(false)
-const rightNumber: any = ref()
+const rightNum: any = ref()
+const rightNumber = computed<Number>(() => {
+  rightNum.value = (375 - cssList.value.left) - cssList.value.width
+  return Math.round(rightNum.value)
+})
 // 固定底部
 const bottomFlag = ref(true)
 const bottomInput = ref(false)
-const bottomNumber: any = ref()
+const bottomNum: any = ref()
+const bottomNumber = computed(() => {
+  bottomNum.value = 647 - cssList.value.height - cssList.value.top
+  return Math.round(bottomNum.value)
+});
 // 固定左侧
 const leftFlag = ref(false)
 const leftInput = ref(false)
-const leftNumber: any = ref()
+const leftNum: any = ref()
+const leftNumber = computed(() => {
+  leftNum.value = cssList.value.left
+  return leftNum.value
+});
 // 控制上下左右输入框自动聚焦
 const inputRef = ref<HTMLInputElement | null>(null);
 const inputRef1 = ref<HTMLInputElement | null>(null);
@@ -112,8 +128,6 @@ 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
   }
@@ -160,26 +174,60 @@ function handleBlur() {
 }
 function handleInput(event: any) {
   const input = event.target as HTMLInputElement;
-  console.log('Input value changed to:', input.value);
+  if (fixedHeight.value) {
+    cssList.value.top = input.value
+  } else {
+    const arr = 647 - cssList.value.height - cssList.value.top
+    const arr1 = (647 - Math.round(arr)) - Number(input.value)
+    if (arr1 > 20) {
+      cssList.value.top = Number(input.value)
+      cssList.value.height = arr1
+    }
+  }
+  emit('update:cssData', cssList.value);
 }
 function handleInput1(event: any) {
-  console.log(event, 6767);
-
+  const input = event.target as HTMLInputElement;
+  if (fixedWidth.value) {
+    const arr = (375 - Number(input.value)) - cssList.value.width
+    cssList.value.left = arr
+  } else {
+    const arr = (375 - Number(input.value)) - cssList.value.left
+    if (arr > 20) {
+      cssList.value.width = arr
+    }
+  }
+  emit('update:cssData', cssList.value);
 }
 function handleInput2(event: any) {
-  console.log(event, 6767);
-
+  const input = event.target as HTMLInputElement;
+  if (fixedHeight.value) {
+    cssList.value.top = 647 - Number(input.value) - cssList.value.height
+  } else {
+    const arr = 647 - Number(input.value) - cssList.value.top
+    if (arr > 20) {
+      cssList.value.height = arr
+    }
+  }
+  emit('update:cssData', cssList.value);
 }
 function handleInput3(event: any) {
-  console.log(event, 6767);
-
+  const input = event.target as HTMLInputElement;
+  if (fixedWidth.value) {
+    cssList.value.left = input.value
+  } else {
+    const arr = (375 - cssList.value.left) - cssList.value.width
+    const arr1 = (375 - Math.round(arr)) - Number(input.value)
+    if (arr1 > 20) {
+      cssList.value.left = input.value
+      cssList.value.width = arr1
+    }
+  }
+  emit('update:cssData', cssList.value);
 }
 // 固定宽度
 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

src/components/widgets/Picture.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="btndata.config.picture ? '' : 'card_title_picture'"
+  <div :class="btndata.config.picture ? '' : 'card_title_picture'" style="overflow: hidden;"
     :style="{ width: btndata.css.width + 'px', height: btndata.css.height + 'px', borderRadius: btndata.css.borderRadius + 'px', opacity: btndata.css.opacity }">
     <el-image style="width: 100%;height: 100%;" :fit="btndata.config.pictureMode"
       :src="getAssetsImages(btndata.config.picture)" v-if="btndata.config.picture">

src/module/config/picture.ts

@@ -2,7 +2,8 @@ const pictureConfig = {
     isActive: false,
     isResizable: true, //禁止缩放
     aspectRatio: false, //禁止等比例缩放
-    resizable: true, //禁止调整大小
+    resizable: true, //禁止调整大小false禁止
+    lock: false, //锁定
     pictureMode: 'contain',//适应contain，fill拉伸
     picture: '', //图片地址名称
     fixedWidth: true, //固定宽度

src/views/HomeView.vue

@@ -22,7 +22,7 @@
           <span class="item_head_label">重做</span>
         </button>
         <button class="item_head_btn" :class="!clearFlag ? 'btn_Void' : 'btn_CDK'" :disabled="!clearFlag"
-          @click="operationalView('clear')">
+          @click.stop="operationalView('clear')">
           <span class="iconfont icon_btn_head icon-qingchu"></span>
           <span class="item_head_label">清除</span>
         </button>
@@ -51,10 +51,27 @@
     <div class="part">
       <!-- 左侧 -->
       <div class="panel_left">
+        <div class="left_tabs_switch">
+          <div class="card_tabs_view center_in" :class="tabsType == 'module' ? 'tabs_active' : ''"
+            @click="getTabs('module')">
+            <el-icon size="30" :color="tabsType == 'module' ? '#409EFF' : '#606266'">
+              <Platform />
+            </el-icon>
+            <span>组件</span>
+          </div>
+          <div class="card_tabs_view center_in" :class="tabsType == 'page' ? 'tabs_active' : ''" @click="getTabs('page')">
+            <el-icon size="30" :color="tabsType == 'page' ? '#409EFF' : '#606266'">
+              <Platform />
+            </el-icon>
+            <span>页面</span>
+          </div>
+        </div>
         <div class="left_paneLeft">
           <div class="pane_tabs">
             <el-tabs v-model="activeName" stretch class="demo-tabs" @tab-click="handleClick">
-              <el-tab-pane label="常用推荐" name="stock"></el-tab-pane>
+              <el-tab-pane label="常用推荐" name="stock">
+                <div>214</div>
+              </el-tab-pane>
               <el-tab-pane label="组件库" name="bank">
                 <module-library :current="current" @send-data="handleReceivedData"></module-library>
               </el-tab-pane>
@@ -90,7 +107,7 @@
                 <template #item="{ element, index }">
                   <div class="item_module_center move">
                     <VueDrag :index="index" :dargData="element" @passId="getId" @modifiedItem="modifiedItem"
-                      @inactivation="inactivation"></VueDrag>
+                      @inactivation="inactivation" @clickHandler="clickHandler"></VueDrag>
                   </div>
                 </template>
               </draggable>
@@ -117,13 +134,24 @@
               </el-tooltip>
             </div>
             <div class="line_divider"></div>
-            <div class="icon_item_align" :class="activate ? 'active_icon' : 'icon_item_gray'">
-              <el-tooltip class="box-item" content="锁定" placement="left" effect="light">
+            <div class="icon_item_align"
+              :class="[activate1 ? 'active_icon' : 'icon_item_gray', activateLock ? 'active_lock' : '']"
+              @click="dragLock">
+              <el-tooltip class="box-item" :content="activateLock ? '取消锁定' : '锁定'" placement="left" effect="light">
                 <span class="iconfont icon_alignment icon-suoding"></span>
               </el-tooltip>
             </div>
+            <div class="line_divider"></div>
+            <div class="icon_item_align" :class="activate ? 'active_icon' : 'icon_item_gray'" @click="dragDel">
+              <el-tooltip class="box-item" content="删除" placement="left" effect="light">
+                <el-icon size="24" color="#F56C6C">
+                  <DeleteFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
           </div>
         </div>
+        <div class="right_forbid" v-if="activateLock"></div>
       </div>
     </div>
   </div>
@@ -152,7 +180,8 @@ import { baseComponent, attributeValue, layout } from '../module/index';
 import { ref, computed } from "vue";
 import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
-
+//module、page、切换组件页面
+const tabsType = ref('module')
 // 图标弹窗
 const drawer = ref(false)
 // const tabPosition = ref<string>('style');
@@ -170,10 +199,45 @@ const extraImgs1: any = ref([]);
 const undoStack: any = ref([]);
 // 恢复操作的栈
 const redoStack: any = ref([]);
-// 对齐方式状态
-const activate: any = ref(true);
 // 操作组件
 const currentMove: any = ref({})
+// 对齐方式状态
+const activeFlag: any = ref(false)
+const activate = computed(() => {
+  if (currentMove.value.active) {
+    activeFlag.value = true
+    if (currentMove.value.config.lock) {
+      activeFlag.value = false
+    } else {
+      activeFlag.value = true
+    }
+  } else {
+    activeFlag.value = false
+  }
+  return activeFlag.value
+});
+const activeFlag1: any = ref(false)
+const activate1 = computed(() => {
+  if (currentMove.value.active) {
+    activeFlag1.value = true
+  } else {
+    activeFlag1.value = false
+  }
+  return activeFlag1.value
+});
+const lockFlag: any = ref(false)
+const activateLock = computed(() => {
+  if (currentMove.value.config) {
+    if (currentMove.value.config.lock) {
+      lockFlag.value = true
+    } else {
+      lockFlag.value = false
+    }
+  } else {
+    lockFlag.value = false
+  }
+  return lockFlag.value
+});
 // 克隆组件
 const cloneItem: any = ref({})
 // 撤销
@@ -188,6 +252,9 @@ const canRedo = computed(() => {
 const clearFlag = computed(() => {
   return extraImgs1.value.length > 0
 })
+// 激活项索引
+const currentIndex: any = ref(null)
+const currentSoleId: any = ref(null)
 // 切换图标tabs项
 const iconName: any = ref('mine')
 const iconList: any = [{
@@ -221,12 +288,18 @@ const onStart = () => {
 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.css.left = Math.round(num)
     cloneItem.value.css.top = value.originalEvent.offsetY
     cloneItem.value.active = true
     const arr = JSON.parse(JSON.stringify(cloneItem.value))
 
     extraImgs1.value.push(arr)
+    extraImgs1.value.forEach((item, index) => {
+      if (item.soleId == arr.soleId) {
+        currentIndex.value = index
+        currentSoleId.value = item.soleId
+      }
+    })
     currentMove.value = arr
 
     undoStack.value.push({ type: 'add', item: arr })
@@ -261,6 +334,10 @@ const handleReceivedData = (num: any) => {
   }
   componentLibrary.value = JSON.parse(JSON.stringify(extraImgs.value))
 }
+// 切换组件页面
+function getTabs(params: any) {
+  tabsType.value = params
+}
 // 切换tabs
 function handleClick(): void {
   console.log(24);
@@ -331,10 +408,7 @@ function announce() {
 function preview() {
   console.log(extraImgs1.value, '预览');
 }
-
 // 激活项索引
-const currentIndex: any = ref(null)
-const currentSoleId: any = ref(null)
 function getId(params: any) {
   // 激活项索引处理对齐方式
   currentIndex.value = params.index
@@ -342,6 +416,14 @@ function getId(params: any) {
   // 切换组件修改样式
   currentMove.value = params.option
 }
+// 点击激活
+function clickHandler(params: any) {
+  // 激活项索引处理对齐方式
+  currentIndex.value = params.index
+  currentSoleId.value = params.soleId
+  // 切换组件修改样式
+  currentMove.value = params.option
+}
 // 失去活跃状态
 function inactivation(params: any) {
   if (currentMove.value.soleId == params.soleId) {
@@ -368,26 +450,49 @@ function modifiedItem(params: any) {
 }
 // 对齐方式按钮触发
 function alignment(params: any) {
-  if (currentIndex.value != null) {
-    if (params.type == 'left') {
-      extraImgs1.value[currentIndex.value].css.left = 0
-    } else if (params.type == 'centerHorizontally') {
-      const num = (375 / 2) - (extraImgs1.value[currentIndex.value].css.width / 2)
-      extraImgs1.value[currentIndex.value].css.left = num
-    } else if (params.type == 'right') {
-      const num = 375 - extraImgs1.value[currentIndex.value].css.width
-      extraImgs1.value[currentIndex.value].css.left = num
-    } else if (params.type == 'top') {
-      extraImgs1.value[currentIndex.value].css.top = 20
-    } else if (params.type == 'verticalCenter') {
-      const num = (667 / 2) - (extraImgs1.value[currentIndex.value].css.height / 2)
-      extraImgs1.value[currentIndex.value].css.top = num
-    } else if (params.type == 'bottom') {
-      const num = 667 - extraImgs1.value[currentIndex.value].css.height
-      extraImgs1.value[currentIndex.value].css.top = num
+  if (currentMove.value.active && !currentMove.value.config.lock) {
+    if (currentIndex.value != null) {
+      if (params.type == 'left') {
+        extraImgs1.value[currentIndex.value].css.left = 0
+      } else if (params.type == 'centerHorizontally') {
+        // 水平居中
+        const num = (375 / 2) - (extraImgs1.value[currentIndex.value].css.width / 2)
+        extraImgs1.value[currentIndex.value].css.left = Math.round(num)
+      } else if (params.type == 'right') {
+        const num = 375 - extraImgs1.value[currentIndex.value].css.width
+        extraImgs1.value[currentIndex.value].css.left = Math.round(num)
+      } else if (params.type == 'top') {
+        extraImgs1.value[currentIndex.value].css.top = 0
+      } else if (params.type == 'verticalCenter') {
+        // 垂直居中
+        const num = (647 / 2) - (extraImgs1.value[currentIndex.value].css.height / 2)
+        extraImgs1.value[currentIndex.value].css.top = Math.round(num)
+      } else if (params.type == 'bottom') {
+        const num = 647 - extraImgs1.value[currentIndex.value].css.height
+        extraImgs1.value[currentIndex.value].css.top = Math.round(num)
+      }
+    }
+  }
+}
+// 组件拖拽锁定
+function dragLock() {
+  if (currentMove.value.active) {
+    if (currentMove.value.config.lock) {
+      currentMove.value.config.lock = false
+    } else {
+      currentMove.value.config.lock = true
+    }
+  }
+}
+// 删除选中组件
+function dragDel() {
+  if (currentMove.value.active && !currentMove.value.config.lock) {
+    const index = extraImgs1.value.findIndex((item) => item.soleId === currentMove.value.soleId);
+    if (index > -1) {
+      extraImgs1.value.splice(index, 1);
+      currentMove.value = {}
     }
   }
-  console.log(extraImgs1.value, 5);
 }
 // 切换图片选择图标抽屉
 function childEvent() {
@@ -399,7 +504,6 @@ function toggleIcon(params: any) {
 }
 // 选择图标
 function getIconSelection(params: any) {
-  console.log(params, currentMove, 222);
   drawer.value = false
   currentMove.value.config.img = params.icon
 }
@@ -548,7 +652,36 @@ function getIconSelection(params: any) {
 .panel_left {
   position: absolute;
   height: 100%;
-  width: 380px;
+  display: flex;
+  // width: 380px;
+}
+
+.left_tabs_switch {
+  width: 68px;
+  z-index: 1;
+}
+
+.card_tabs_view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  height: 80px;
+  cursor: pointer;
+
+  span {
+    font-size: 14px;
+    margin-top: 5px;
+    color: #606266;
+  }
+}
+
+.tabs_active {
+  background-color: #fff;
+
+  span {
+    color: #409EFF;
+  }
 }
 
 .left_paneLeft {
@@ -581,7 +714,7 @@ function getIconSelection(params: any) {
 .left_paneRight {
   display: flex;
   flex-direction: column;
-  position: absolute;
+  // position: absolute;
   top: 0px;
   width: calc(220px - 20px);
   height: 100%;
@@ -695,6 +828,16 @@ function getIconSelection(params: any) {
   position: absolute !important;
 }
 
+.right_forbid {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background: rgb(255, 255, 255);
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 .card_maskedbox {
   padding: 20px 14px 25px;
   overflow: hidden overlay;
@@ -730,6 +873,10 @@ function getIconSelection(params: any) {
   color: #409EFF;
 }
 
+.active_lock .icon_alignment {
+  color: #409EFF;
+}
+
 .icon_item_gray {
   opacity: 0.3;
   -webkit-user-select: none;
@@ -769,7 +916,6 @@ function getIconSelection(params: any) {
 }
 
 
-
 img {
   width: 85px;
   height: 85px;
@@ -787,9 +933,9 @@ img {
 }
 
 .Bzu {
-  height: 100%;
+  height: calc(100% - 20px);
   position: absolute;
-  top: 0;
+  top: 20px;
   bottom: 0;
   left: 0;
   right: 0;

src/views/TestDrag.vue

@@ -7,7 +7,7 @@
                 </div>
             </DraggableContainer> -->
             <DraggableContainer :referenceLineColor="'#0f0'">
-                <Vue3DraggableResizable  @activated="activated" @deactivated="deactivated">
+                <Vue3DraggableResizable :lock-aspect-ratio="true" @activated="activated" @deactivated="deactivated">
                     <div style="width: 200px;height: 200px;background-color: #fff;">2151</div>
                 </Vue3DraggableResizable>
                 <Vue3DraggableResizable @activated="activated" @deactivated="deactivated">

src/views/maskedbox.vue

@@ -1,6 +1,6 @@
 <!-- 样式编辑控件 -->
 <template>
-    <layout v-if="config.config.fixedWidth && config.config.fixedHeight" v-model:configData="config.config"
+    <layout v-if="'fixedWidth' in config.config && 'fixedHeight' in config.config" v-model:configData="config.config"
         v-model:cssData="config.css"></layout>
     <div class="box_padding" v-if="config.css">
         <div class="same_row_in">