[feature] 在盒模型中显示宽高

宋远桥
1 parent 0e4d1aee
Showing 3 changed files with 62 additions and 7 deletions
front-end/h5/src/components/core/editor/right-panel/box-model/index.vue
front-end/h5/src/components/core/editor/right-panel/box-model/position-checkbox.vue
front-end/h5/src/components/core/editor/right-panel/props.js
 <template>
   <div v-if="editingElement" class="box-model">
-    <div v-if="lastSelect" class="prompt">设置 {{ lastSelect }} 大小</div>
+    <div v-if="boxModelPart" class="prompt">设置 {{ boxModelPart }} 大小</div>
     <div v-else>选择 margin/border/padding 设置大小</div>
     <PositionCheckbox label="上" label-key="top" />
     <div class="middle">
@@ -11,6 +11,9 @@
           border
           <div ref="padding" class="padding" data-type="padding">
             padding
+            <div class="content"  data-type="padding">
+              {{ commonStyle.width | digit }} x {{ commonStyle.height | digit }}
+            </div>
           </div>
         </div>
       </div>
@@ -36,7 +39,18 @@
     computed: {
       ...mapState('editor', {
         editingElement: state => state.editingElement
-      })
+      }),
+      boxModelPart () {
+        return this.editingElement && this.editingElement.commonStyle.boxModelPart
+      },
+      commonStyle () {
+        return this.editingElement ? this.editingElement.commonStyle : {}
+      }
+    },
+    filters: {
+      digit (val) {
+        return val.toFixed(0)
+      }
     },
     methods: {
       ...mapActions('editor', [
@@ -60,6 +74,23 @@
           this.lastSelect = type
         }
       }
+    },
+    watch: {
+      /**
+       * 监听当前是否有选中的组件，如果有判断之前是否保存了 boxModelPart
+       * 如果保存了就将之前编辑状态重新复原。
+       */
+      editingElement: {
+        immediate: true,
+        handler (val) {
+          if (!this.boxModelPart) return
+          const selectClass = this.boxModelPart + '-select'
+          this.$nextTick(() => {
+            this.$refs[this.boxModelPart].classList.add(selectClass)
+            this.lastSelect = this.boxModelPart
+          })
+        }
+      }
     }
   }
 </script>
@@ -76,8 +107,6 @@
     background-color: rgb(170, 170, 95);
   }
 }
-.box-model{
-}
 .middle{
   margin:20px 0;
   display: flex;
@@ -104,4 +133,9 @@
   height: 50px;
   .common()
 }
+.content{
+  background-color: rgb(82, 82, 126);
+  width:80%;
+  .inline-block()
+}
 </style>
@@ -3,10 +3,13 @@
     <!-- 只有选中 padding border margin 之后才会显示 -->
     <template v-if="boxModelPart">
       <div class="flex">
-        <a-checkbox @change="onCheckboxChange">
+        <a-checkbox @change="onCheckboxChange" :checked="isChecked">
         </a-checkbox>
         <div class="label">{{label}}</div>
       </div>
+
+    </template>
+    <template v-if="boxModelPart && isChecked">
       <a-input-number style="width:70px" :value="value" :min="0" @change="onInputNumberChange" />
       <a-select :default-value="unitList[0]" style="width:70px">
         <a-select-option v-for="(item,index) in unitList" :key="index" :value="item">
@@ -31,6 +34,11 @@
         default: ''
       }
     },
+    data () {
+      return {
+        isChecked: false
+      }
+    },
     computed: {
       ...mapState('editor', {
         editingElement: state => state.editingElement
@@ -51,6 +59,8 @@
         'setElementPosition'
       ]),
       onCheckboxChange (e) {
+        console.log(e)
+        this.isChecked = e.target.checked
       },
       onInputNumberChange (value) {
         const boxModelPart = this.boxModelPart
@@ -60,6 +70,16 @@
         Object.assign(boxModelPartStyle[this.labelKey], { value })
         this.setElementPosition({ [boxModelPart]: boxModelPartStyle })
       }
+    },
+    watch: {
+      value: {
+        immediate: true,
+        handler (val) {
+          if (val) {
+            this.isChecked = true
+          }
+        }
+      }
     }
   }
 </script>
@@ -180,11 +180,12 @@ export default {
           class="props-config-form"
           layout={this.layout}
         >
-          <BoxModel></BoxModel>
-          {/* 只有在选中编辑组件的时候显示 */}
+          {/* left,top,width,height编辑 只有在选中编辑组件的时候显示 */}
             {
               this.stateEditingElement ? this.renderEditorPositionConfig(h) : ''
             }
+          {/* margin、padding编辑 */}
+          <BoxModel />
           {
             // plugin-custom-editor
             this.loadCustomEditorFlag &&