布局上下左右控制

src/components/maskedbox/layout.vue

@@ -17,28 +17,34 @@
           <div class="cPsGLK" v-else>
             <input class="bcwrvZ_input" ref="inputRef" v-model="topNumber" type="number" @blur="handleBlur"
               v-if="topInput">
-            <p class="bcwrvZ" @dblclick="handleDoubleClick" v-else>35</p>
+            <p class="bcwrvZ" @dblclick="handleDoubleClick('top')" v-else>{{ topNumber }}</p>
           </div>
           <!-- 右 -->
           <el-tooltip content="固定右侧" placement="left" effect="light" v-if="rightFlag">
             <div class="bTzFoR" @click="reversal('right')"></div>
           </el-tooltip>
           <div class="gjYPCM" v-else>
-            <p class="cMizyy">35</p>
+            <input class="cMizyy_input" ref="inputRef1" v-model="rightNumber" type="number" @blur="handleBlur"
+              v-if="rightInput">
+            <p class="cMizyy" @dblclick="handleDoubleClick('right')" v-else>{{ rightNumber }}</p>
           </div>
           <!-- 下 -->
           <el-tooltip content="固定底部" placement="left" effect="light" v-if="bottomFlag">
             <div class="eIwCFM" @click="reversal('bottom')"></div>
           </el-tooltip>
           <div class="YoRMb" v-else>
-            <p class="gboeoP">35</p>
+            <input class="gboeoP_input" ref="inputRef2" v-model="bottomNumber" type="number" @blur="handleBlur"
+              v-if="bottomInput">
+            <p class="gboeoP" @dblclick="handleDoubleClick('bottom')" v-else>{{ bottomNumber }}</p>
           </div>
           <!-- 左 -->
           <el-tooltip content="固定左侧" placement="left" effect="light" v-if="leftFlag">
             <div class="fVBVzi" @click="reversal('left')"></div>
           </el-tooltip>
           <div class="ljHwKA" v-else>
-            <p class="eEegxJ">35</p>
+            <input class="eEegxJ_input" ref="inputRef3" v-model="leftNumber" type="number" @blur="handleBlur"
+              v-if="leftInput">
+            <p class="eEegxJ" @dblclick="handleDoubleClick('left')" v-else>{{ leftNumber }}</p>
           </div>
           <!-- 视图盒子 -->
           <div class="box_view"></div>
@@ -74,26 +80,58 @@ const topNumber: any = ref(22)
 // 固定右侧
 const rightFlag = ref(true)
 const rightInput = ref(false)
+const rightNumber: any = ref(22)
 // 固定底部
 const bottomFlag = ref(true)
-const bottomFInput = ref(false)
+const bottomInput = ref(false)
+const bottomNumber: any = ref(22)
 // 固定左侧
 const leftFlag = ref(false)
 const leftInput = ref(false)
+const leftNumber: any = ref(22)
 
 const inputRef = ref<HTMLInputElement | null>(null);
+const inputRef1 = ref<HTMLInputElement | null>(null);
+const inputRef2 = ref<HTMLInputElement | null>(null);
+const inputRef3 = ref<HTMLInputElement | null>(null);
 // 双击输入框获取焦点
-function handleDoubleClick() {
-  topInput.value = true
-  setTimeout(() => {
-    if (inputRef.value) {
-      inputRef.value.focus();
-    }
-  })
+function handleDoubleClick(params: any) {
+  if (params == 'top') {
+    topInput.value = true
+    setTimeout(() => {
+      if (inputRef.value) {
+        inputRef.value.focus();
+      }
+    })
+  } else if (params == 'right') {
+    rightInput.value = true
+    setTimeout(() => {
+      if (inputRef1.value) {
+        inputRef1.value.focus();
+      }
+    })
+  } else if (params == 'bottom') {
+    bottomInput.value = true
+    setTimeout(() => {
+      if (inputRef2.value) {
+        inputRef2.value.focus();
+      }
+    })
+  } else if (params == 'left') {
+    leftInput.value = true
+    setTimeout(() => {
+      if (inputRef3.value) {
+        inputRef3.value.focus();
+      }
+    })
+  }
 }
 // 失去焦点
 function handleBlur() {
   topInput.value = false
+  rightInput.value = false
+  bottomInput.value = false
+  leftInput.value = false
 }
 // 固定宽度
 function getFixedWidth() {
@@ -298,6 +336,18 @@ input[type="number"]:focus {
   left: 6px;
 }
 
+.cMizyy_input {
+  border-radius: 11px;
+  width: 39px;
+  height: 22px;
+  position: absolute;
+  top: -11px;
+  left: 6px;
+  border: 1px solid rgb(15, 115, 230);
+  text-align: center;
+  color: rgb(15, 115, 230);
+}
+
 .eIwCFM {
   position: absolute;
   height: 21px;
@@ -351,6 +401,18 @@ input[type="number"]:focus {
   left: -19px;
 }
 
+.gboeoP_input {
+  border-radius: 11px;
+  width: 39px;
+  height: 22px;
+  position: absolute;
+  top: 8px;
+  left: -19px;
+  border: 1px solid rgb(15, 115, 230);
+  text-align: center;
+  color: rgb(15, 115, 230);
+}
+
 .fVBVzi {
   position: absolute;
   height: 35px;
@@ -404,6 +466,18 @@ input[type="number"]:focus {
   left: 7px;
 }
 
+.eEegxJ_input {
+  border-radius: 11px;
+  width: 39px;
+  height: 22px;
+  position: absolute;
+  top: -11px;
+  left: 7px;
+  border: 1px solid rgb(15, 115, 230);
+  text-align: center;
+  color: rgb(15, 115, 230);
+}
+
 .kdbebz {
   width: 100px;
   height: 100px;
@@ -542,5 +616,4 @@ input[type="number"]:focus {
   margin-top: 8px;
   text-align: center;
   transform: scale(0.85);
-}
-</style>
+}</style>