[feat] 添加border-color&修改edit 和 preview 样式统一

宋远桥
1 parent ac2df5ab
Showing 4 changed files with 43 additions and 7 deletions
front-end/h5/src/components/core/editor/canvas/preview.js
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
@@ -11,12 +11,19 @@ export default {
   methods: {
     renderPreview (h, elements) {
       const pageWrapperStyle = { height: this.height || '100%', position: 'relative' }
+      // 与 edit 组件保持样式一致
+      const data = {
+        style: {
+          width: '100%',
+          height: '100%'
+        }
+      }
       return (
         <div style={pageWrapperStyle}>
           {
             elements.map((element, index) => {
               return <node-wrapper element={element}>
-                {h(element.name, element.getPreviewData({ position: 'static' }))}
+                {h(element.name, data)}
               </node-wrapper>
             })
           }
 <template>
   <div v-if="editingElement" class="box-model">
-    <div v-if="boxModelPart" class="prompt">设置 {{ boxModelPart }} 大小</div>
-    <div v-else>选择 margin/border/padding 设置大小</div>
+    <div v-if="boxModelPart" class="prompt">设置 {{ boxModelPart }}</div>
+    <div v-else>选择 margin/border/padding 进行设置</div>
+    <el-color-picker v-if="isEditingBorder" size="small" :value="borderColor" @change="onColorChange"/>
     <PositionCheckbox label="上" label-key="top" />
     <div class="middle">
       <PositionCheckbox label="左" label-key="left" />
@@ -45,6 +46,12 @@
       },
       commonStyle () {
         return this.editingElement ? this.editingElement.commonStyle : {}
+      },
+      borderColor () {
+        return this.commonStyle ? this.commonStyle.border.color.value : ''
+      },
+      isEditingBorder () {
+        return this.boxModelPart === 'border'
       }
     },
     filters: {
@@ -73,6 +80,18 @@
           target.classList.add(selectClass)
           this.lastSelect = type
         }
+      },
+      onColorChange (color) {
+        console.log('color', color)
+        this.changeCommonStyle(color, 'color')
+      },
+      changeCommonStyle (changeValue, labelKey, key = 'value') {
+         const boxModelPart = this.boxModelPart
+        // 例如 boxModelPart 为 margin 时候
+        const boxModelPartStyle = this.editingElement.commonStyle[boxModelPart]
+        // 更新值例如: padding-top
+        Object.assign(boxModelPartStyle[labelKey], { [key]: changeValue })
+        this.setElementPosition({ [boxModelPart]: boxModelPartStyle })
       }
     },
     watch: {
@@ -11,7 +11,7 @@
     </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 :value="unit" style="width:70px" @change="onUnitChange">
         <a-select-option v-for="(item,index) in unitList" :key="index" :value="item">
           {{ item }}
         </a-select-option>
@@ -50,6 +50,10 @@
         const { editingElement, labelKey, boxModelPart } = this
         return this.boxModelPart ? editingElement.commonStyle[boxModelPart][labelKey].value : ''
       },
+      unit () {
+        const { editingElement, labelKey, boxModelPart } = this
+        return this.boxModelPart ? editingElement.commonStyle[boxModelPart][labelKey].unit : ''
+      },
       unitList () {
         return this.boxModelPart === 'border' ? ['px', 'em'] : ['px', '%', 'em']
       }
@@ -58,16 +62,22 @@
       ...mapActions('editor', [
         'setElementPosition'
       ]),
+      onUnitChange (unit) {
+        this.changeCommonStyle(unit, 'unit')
+      },
       onCheckboxChange (e) {
         console.log(e)
         this.isChecked = e.target.checked
       },
       onInputNumberChange (value) {
-        const boxModelPart = this.boxModelPart
+        this.changeCommonStyle(value)
+      },
+      changeCommonStyle (changeValue, key = 'value') {
+         const boxModelPart = this.boxModelPart
         // 例如 boxModelPart 为 margin 时候
         const boxModelPartStyle = this.editingElement.commonStyle[boxModelPart]
         // 更新值例如: padding-top
-        Object.assign(boxModelPartStyle[this.labelKey], { value })
+        Object.assign(boxModelPartStyle[this.labelKey], { [key]: changeValue })
         this.setElementPosition({ [boxModelPart]: boxModelPartStyle })
       }
     },
@@ -151,7 +151,7 @@ class Element {
        * 使用 border-left border-right 等方式，在 chrome 浏览器中会导致渲染问题
        * 这里就将他拼接成完整的 border-width解决bug，不知道是什么原因
        */
-      'border-width': `${top.value}px ${right.value}px ${bottom.value}px ${left.value}px `,
+      'border-width': `${top.value}${top.unit} ${right.value}${right.unit} ${bottom.value}${bottom.unit} ${left.value}${left.unit} `,
       'border-style': style.value,
       'border-color': color.value
     }