[feature] 解决更改组件border渲染问题

宋远桥 · 小小鲁班
1 parent a81a9fb6
Showing 3 changed files with 150 additions and 32 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/models/element.js
 <template>
-  <div class="box-model">
+  <div v-if="editingElement" class="box-model">
     <div v-if="lastSelect" class="prompt">设置 {{ lastSelect }} 大小</div>
     <div v-else>选择 margin/border/padding 设置大小</div>
-    <PositionCheckbox label="上" />
+    <PositionCheckbox label="上" label-key="top" />
     <div class="middle">
-      <PositionCheckbox label="左" />
+      <PositionCheckbox label="左" label-key="left" />
       <div ref="margin" class="margin" data-type="margin"  @click="onBoxModelClick">
         margin
         <div ref="border" class="border" data-type="border">
@@ -14,13 +14,14 @@
           </div>
         </div>
       </div>
-      <PositionCheckbox label="右" />
+      <PositionCheckbox label="右" label-key="right" />
     </div>
-    <PositionCheckbox label="下" />
+    <PositionCheckbox label="下" label-key="bottom" />
   </div>
 </template>
 <script>
+  import { mapState, mapActions } from 'vuex'
   import PositionCheckbox from './position-checkbox'
   export default {
     name: 'BoxModel',
@@ -32,14 +33,24 @@
         lastSelect: ''
       }
     },
-
+    computed: {
+      ...mapState('editor', {
+        editingElement: state => state.editingElement
+      })
+    },
     methods: {
+      ...mapActions('editor', [
+        'setElementPosition'
+      ]),
       onBoxModelClick (e) {
         const target = e.target
         const classList = target.classList
         const type = target.dataset.type
         const selectClass = type + '-select'
-
+        // 更新选中的 boxModelPart，用于判断当前设置的是 margin / border / padding
+        this.setElementPosition({
+          boxModelPart: type
+        })
         if (this.lastSelect && type !== this.lastSelect) {
           this.$refs[this.lastSelect].classList.remove(this.lastSelect + '-select')
         }
 <template>
   <div class="position-checkbox">
-    <div class="flex">
-      <a-checkbox @change="onCheckboxChange">
-      </a-checkbox>
-      <div class="label">{{label}}</div>
-    </div>
-    <a-input-number style="width:70px" v-model="value" :min="0" @change="onInputNumberChange" />
-    <a-select default-value="px" style="width:70px">
-      <a-select-option value="px">
-        px
-      </a-select-option>
-      <a-select-option value="%">
-        %
-      </a-select-option>
-      <a-select-option value="em">
-        em
-      </a-select-option>
-    </a-select>
+    <!-- 只有选中 padding border margin 之后才会显示 -->
+    <template v-if="boxModelPart">
+      <div class="flex">
+        <a-checkbox @change="onCheckboxChange">
+        </a-checkbox>
+        <div class="label">{{label}}</div>
+      </div>
+      <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">
+          {{ item }}
+        </a-select-option>
+      </a-select>
+    </template>
   </div>
 </template>
 <script>
+  import { mapState, mapActions } from 'vuex'
   export default {
     name: 'PositionCheckbox',
     props: {
       label: {
         type: String,
         default: ''
+      },
+      labelKey: {
+        type: String,
+        default: ''
       }
     },
-    data () {
-      return {
-        value: 1
+    computed: {
+      ...mapState('editor', {
+        editingElement: state => state.editingElement
+      }),
+      boxModelPart () {
+        return this.editingElement && this.editingElement.commonStyle.boxModelPart
+      },
+      value () {
+        const { editingElement, labelKey, boxModelPart } = this
+        return this.boxModelPart ? editingElement.commonStyle[boxModelPart][labelKey].value : ''
+      },
+      unitList () {
+        return this.boxModelPart === 'border' ? ['px', 'em'] : ['px', '%', 'em']
       }
     },
-
     methods: {
-      onCheckboxChange () {},
-      onInputNumberChange () {}
+      ...mapActions('editor', [
+        'setElementPosition'
+      ]),
+      onCheckboxChange (e) {
+      },
+      onInputNumberChange (value) {
+        const boxModelPart = this.boxModelPart
+        // 例如 boxModelPart 为 margin 时候
+        const boxModelPartStyle = this.editingElement.commonStyle[boxModelPart]
+        // 更新值例如: padding-top
+        Object.assign(boxModelPartStyle[this.labelKey], { value })
+        this.setElementPosition({ [boxModelPart]: boxModelPartStyle })
+      }
     }
   }
 </script>
@@ -13,7 +13,69 @@ const defaultStyle = {
   textAlign: 'center',
   color: '#000000',
   backgroundColor: 'rgba(255, 255, 255, 0)',
-  fontSize: 14
+  fontSize: 14,
+  margin: {
+    top: {
+      value: 10,
+      unit: 'px'
+    },
+    right: {
+      value: 0,
+      unit: 'px'
+    },
+    bottom: {
+      value: 30,
+      unit: 'px'
+    },
+    left: {
+      value: 0,
+      unit: 'px'
+    }
+  },
+  padding: {
+    top: {
+      value: 0,
+      unit: 'px'
+    },
+    right: {
+      value: 0,
+      unit: 'px'
+    },
+    bottom: {
+      value: 0,
+      unit: 'px'
+    },
+    left: {
+      value: 0,
+      unit: 'px'
+    }
+  },
+  border: {
+    top: {
+      value: 0,
+      unit: 'px'
+    },
+    right: {
+      value: 0,
+      unit: 'px'
+    },
+    bottom: {
+      value: 0,
+      unit: 'px'
+    },
+    left: {
+      value: 0,
+      unit: 'px'
+    },
+    color: {
+      value: '#000'
+    },
+    style: {
+      value: 'solid'
+    }
+  },
+  'border-style': 'solid',
+  boxModelPart: '' // 可选值 margin、padding、border
 }
 class Element {
@@ -75,7 +137,25 @@ class Element {
     return pluginProps
   }
-
+  packPosData (obj, prefix) {
+    let init = {}
+    Object.keys(obj).forEach(key => {
+      init[prefix + '-' + key] = obj[key].value + (obj[key].unit || '')
+    })
+    return init
+  }
+  packBorderData () {
+    const { top, right, bottom, left, color, style } = this.commonStyle.border
+    return {
+      /**
+       * 使用 border-left border-right 等方式，在 chrome 浏览器中会导致渲染问题
+       * 这里就将他拼接成完整的 border-width解决bug，不知道是什么原因
+       */
+      'border-width': `${top.value}px ${right.value}px ${bottom.value}px ${left.value}px `,
+      'border-style': style.value,
+      'border-color': color.value
+    }
+  }
   getStyle ({ position = 'static', isRem = false } = {}) {
     if (this.name === 'lbp-background') {
       return {
@@ -85,12 +165,17 @@ class Element {
     }
     const pluginProps = this.pluginProps
     const commonStyle = this.commonStyle
+    const { margin, padding } = commonStyle
+    // 由于在 defaultStyle 定义的时候是对象，这里需要将数据重新组装成 margin-top 这种形式
+    const boxModel = { ...this.packPosData(margin, 'margin'), ...this.packPosData(padding, 'padding'), ...this.packBorderData() }
     let style = {
       top: parsePx(pluginProps.top || commonStyle.top, isRem),
       left: parsePx(pluginProps.left || commonStyle.left, isRem),
       width: parsePx(pluginProps.width || commonStyle.width, isRem),
       height: parsePx(pluginProps.height || commonStyle.height, isRem),
       fontSize: parsePx(pluginProps.fontSize || commonStyle.fontSize, isRem),
+      ...boxModel,
+      // 'border-style': commonStyle['border-style'],
       color: pluginProps.color || commonStyle.color,
       // backgroundColor: pluginProps.backgroundColor || commonStyle.backgroundColor,
       textAlign: pluginProps.textAlign || commonStyle.textAlign,