[feature] 盒模型展示区域绘制

宋远桥 · 小小鲁班
1 parent b4ad6c18
Showing 3 changed files with 159 additions and 0 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 class="box-model">
+    <div v-if="lastSelect" class="prompt">设置 {{ lastSelect }} 大小</div>
+    <div v-else>选择 margin/border/padding 设置大小</div>
+    <PositionCheckbox label="上" />
+    <div class="middle">
+      <PositionCheckbox label="左" />
+      <div ref="margin" class="margin" data-type="margin"  @click="onBoxModelClick">
+        margin
+        <div ref="border" class="border" data-type="border">
+          border
+          <div ref="padding" class="padding" data-type="padding">
+            padding
+          </div>
+        </div>
+      </div>
+      <PositionCheckbox label="右" />
+    </div>
+    <PositionCheckbox label="下" />
+  </div>
+</template>
+
+<script>
+  import PositionCheckbox from './position-checkbox'
+  export default {
+    name: 'BoxModel',
+    components: {
+      PositionCheckbox
+    },
+    data () {
+      return {
+        lastSelect: ''
+      }
+    },
+
+    methods: {
+      onBoxModelClick (e) {
+        const target = e.target
+        const classList = target.classList
+        const type = target.dataset.type
+        const selectClass = type + '-select'
+
+        if (this.lastSelect && type !== this.lastSelect) {
+          this.$refs[this.lastSelect].classList.remove(this.lastSelect + '-select')
+        }
+        // 选中的元素添加上选中的 className
+        if (!classList.contains(selectClass)) {
+          target.classList.add(selectClass)
+          this.lastSelect = type
+        }
+      }
+    }
+  }
+</script>
+
+<style lang='less' scoped>
+.inline-block{
+  display:inline-block;
+  text-align: center;
+}
+.common{
+  .inline-block();
+  background-color:rgb(15, 14, 14);
+  &-select{
+    background-color: rgb(170, 170, 95);
+  }
+}
+.box-model{
+}
+.middle{
+  margin:20px 0;
+  display: flex;
+  align-items: center;
+}
+.margin{
+  width:150px;
+  height: 110px;
+  border:1px dashed #fff;
+  color: #fff;
+  font-size:12px;
+  flex-shrink: 0;
+  .common()
+}
+.border{
+  width:120px;
+  height: 80px;
+  border:1px solid #fff;
+  .common()
+}
+.padding{
+  border:1px dashed #fff;
+  width:90px;
+  height: 50px;
+  .common()
+}
+</style>
+<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>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'PositionCheckbox',
+    props: {
+      label: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        value: 1
+      }
+    },
+
+    methods: {
+      onCheckboxChange () {},
+      onInputNumberChange () {}
+    }
+  }
+</script>
+
+<style lang='less' scoped>
+.flex{
+  display: flex;
+  align-items: center;
+}
+.position-checkbox{
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.label{
+  margin:0 10px;
+}
+</style>
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
+import BoxModel from './box-model'
 import { getVM, getComponentsForPropsEditor } from '@/utils/element'
 import 'core/styles/props-config-panel.scss'
  
 export default {
   name: 'RightPanelProps',
+  components: {
+    BoxModel
+  },
   data: () => ({
     loadCustomEditorFlag: false,
     editorPositionConfig: [
@@ -176,6 +180,7 @@ export default {
           class="props-config-form"
           layout={this.layout}
         >
+          <BoxModel></BoxModel>
           {/* 只有在选中编辑组件的时候显示 */}
             {
               this.stateEditingElement ? this.renderEditorPositionConfig(h) : ''