ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/flexLayout/config.js

@@ -0,0 +1,691 @@
+import Index from './index.vue'
+import RenderComponent from './RenderComponent.vue'
+export default {
+  id: 'layoutContainer', // id必须是唯一
+  label: '弹性布局',
+  icon: {
+    type: 'svg', // 图标类型
+    value: '弹性布局' // 图标值
+  },
+  sort: 1,
+  type: 'layout',
+  isContainer: true,
+  setup: ({ store, component })=>{
+    return {
+      config: {
+        props: [
+          {
+            label: '布局配置',
+            key: 'layoutConfig',
+            componentType: 'Collapse',
+            componentProps: {
+              noCollapse: true,
+              defaultOpen: true
+            },
+            children: [
+              {
+                label: '布局方式',
+                key: 'display',
+                value: 'flex',
+                componentType: 'Radio',
+                componentProps: {
+                  type: 'button',
+                  options: [
+                    {
+                      label: '弹性',
+                      value: 'flex'
+                    },
+                    {
+                      label: '固定',
+                      value: 'block'
+                    }
+                  ]
+
+                },
+                componentEvent: {
+                  change: ({ configValue, value, activeComponent }) => {
+                    const containerAllComponent = store.componentStore.componentData.filter(item => item.parentId === activeComponent.id);
+                    if (value === 'block') {
+                      configValue.flex = 'none';
+                      const parent = activeComponent?.dom?.parentElement
+                      if (parent) {
+                        const flexDirection = parent.style.flexDirection;
+                        if (flexDirection === 'row') {
+                          activeComponent.position.w = activeComponent?.dom?.getBoundingClientRect().width + 'px';
+                        } else {
+                          activeComponent.position.h = activeComponent?.dom?.getBoundingClientRect().height + 'px';
+                        }
+                      }
+                      configValue['block-alignment'] = {
+                        level: '左',
+                        vertical: '上'
+                      }
+                      containerAllComponent?.forEach(item => {
+                        item.baseStyle.position = 'absolute'
+                      });
+                    }
+                    if (value === 'flex') {
+                      configValue.flex = 1;
+                      containerAllComponent?.forEach(item => {
+                        item.baseStyle.position = 'relative'
+                        item.baseStyle.marginLeft = '0'
+                        item.baseStyle.marginTop = '0'
+                        item.position.x = 0;
+                        item.position.y = 0;
+                      });
+                    }
+                  }
+                },
+                show: false
+              },
+              {
+                label: '排列方向',
+                key: 'flexDirection',
+                value: 'row',
+                componentType: 'Radio',
+                componentProps: {
+                  type: 'button',
+                  options: [
+                    {
+                      label: '横向',
+                      value: 'row'
+                    },
+                    {
+                      label: '纵向',
+                      value: 'column'
+                    }
+                  ]
+
+                },
+                componentEvent: {
+                  change: ({ configValue, value, activeComponent }) => {
+                    if (configValue.distribution) {
+                      if (value === 'row') {
+                        configValue['flex-alignment'].justifyContent = '';
+                      }
+                      if (value === 'column') {
+                        configValue['flex-alignment'].alignItems = '';
+                      }
+
+                    }
+                  }
+                },
+                show: (values)=>{
+                  return values.display === 'flex'
+                }
+
+
+              },
+              {
+                label: '空间占比',
+                key: 'flex',
+                value: 1,
+                componentType: 'InputNumber',
+                componentProps: {
+                  min: 0,
+                  max: 100,
+                  step: 1
+                },
+                show: (values)=>{
+                  return values.display === 'flex'
+                }
+              },
+              {
+                label: '对齐方式',
+                key: 'flex-alignment',
+                value: {
+                  justifyContent: '左',
+                  alignItems: '上'
+                },
+                componentType: 'Radio',
+                componentProps: {
+                  type: 'button',
+                  isGroup: true,
+                  optionGroup: [
+                    {
+                      value: '中',
+                      key: 'justifyContent',
+                      options: [
+                        {
+                          value: '左',
+                          key: 'left',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M870.4 238.08a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56z m-358.4 204.8a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56z m0 204.8a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56z m353.28 133.12a5.12 5.12 0 0 1 5.12 5.12v66.56a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56z"  p-id="28038"></path>'
+                          } },
+                        {
+                          value: '中',
+                          key: 'center',
+                          icon: {
+                            type: 'html',
+                            value: ' <path d="M870.4 238.08a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56zM711.68 652.8a5.12 5.12 0 0 0 5.12-5.12v-66.56a5.12 5.12 0 0 0-5.12-5.12H363.52a5.12 5.12 0 0 0-5.12 5.12v66.56a5.12 5.12 0 0 0 5.12 5.12h348.16zM716.8 442.88a5.12 5.12 0 0 1-5.12 5.12H363.52a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 852.48a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56z" p-id="20744"></path>'
+                          }
+                        },
+                        {
+                          value: '右',
+                          key: 'right',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M870.4 238.08a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 442.88a5.12 5.12 0 0 1-5.12 5.12h-348.16a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 647.68a5.12 5.12 0 0 1-5.12 5.12h-348.16a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 852.48a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56z" p-id="21109"></path>'
+                          }
+
+                        }
+                      ]
+                    },
+                    {
+                      value: '中',
+                      key: 'alignItems',
+                      options: [
+                        {
+                          value: '上',
+                          key: 'top',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M896 128v64H128V128h768z"  p-id="26733" data-spm-anchor-id="a313x.search_index.0.i12.15f73a81iQ5Yf3" class="selected"></path><path d="M320 896V256h128v640zM576 768V256h128v512z"  p-id="26734" data-spm-anchor-id="a313x.search_index.0.i13.15f73a81iQ5Yf3" class="selected"></path>'
+                          }
+                        },
+                        {
+                          value: '中',
+                          key: 'center',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M704 682.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-384a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h384z m128-213.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334h-640a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h640z m-128-213.333333a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-384a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h384z" p-id="22974"></path>'
+                          }
+                        },
+                        {
+                          value: '下',
+                          key: 'bottom',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M896 832v64H128v-64h768z"  p-id="26940"></path><path d="M320 768V128h128v640zM576 768V256h128v512z"  p-id="26941" data-spm-anchor-id="a313x.search_index.0.i17.15f73a81iQ5Yf3" class="selected"></path>'
+                          }
+
+                        }
+                      ]
+                    }
+                  ]
+
+                },
+                componentEvent: {
+                  change: ({ value, configValue }) => {
+                    const { justifyContent, alignItems } = value;
+
+                    const levelAlignmentMap = {
+                      左: (field)=> {
+                        configValue[field] = 'flex-start';
+                      },
+                      中: (field)=> {
+                        configValue[field] = 'center';
+                      },
+                      右: (field)=> {
+                        configValue[field] = 'flex-end';
+                      }
+                    }
+                    const verticalAlignmentMap = {
+                      上: (field)=> {
+                        configValue[field] = 'flex-start';
+                      },
+                      中: (field)=> {
+                        configValue[field] = 'center';
+                      },
+                      下: (field)=> {
+                        configValue[field] = 'flex-end';
+                      }
+                    }
+
+
+                    if (configValue.flexDirection === 'row') {
+                      if (justifyContent && configValue.distribution) {
+                        configValue.distribution = ''
+                      }
+                      levelAlignmentMap[justifyContent]?.('justifyContent')
+                      verticalAlignmentMap[alignItems]?.('alignItems')
+
+                    } else {
+                      if (alignItems && configValue.distribution) {
+                        configValue.distribution = ''
+                      }
+                      levelAlignmentMap[justifyContent]?.('alignItems')
+                      verticalAlignmentMap[alignItems]?.('justifyContent')
+                    }
+
+                  }
+                },
+                show: (values)=>{
+                  return values.display === 'flex'
+                }
+
+
+              },
+              {
+                label: '对齐方式',
+                key: 'block-alignment',
+                value: {
+                  level: '左',
+                  vertical: '上'
+                },
+                componentType: 'Radio',
+                componentProps: {
+                  type: 'button',
+                  isGroup: true,
+                  optionGroup: [
+                    {
+                      value: '中',
+                      key: 'level',
+                      options: [
+                        {
+                          value: '左',
+                          key: 'left',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M870.4 238.08a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56z m-358.4 204.8a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56z m0 204.8a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56z m353.28 133.12a5.12 5.12 0 0 1 5.12 5.12v66.56a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56z"  p-id="28038"></path>'
+                          } },
+                        {
+                          value: '中',
+                          key: 'center',
+                          icon: {
+                            type: 'html',
+                            value: ' <path d="M870.4 238.08a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56zM711.68 652.8a5.12 5.12 0 0 0 5.12-5.12v-66.56a5.12 5.12 0 0 0-5.12-5.12H363.52a5.12 5.12 0 0 0-5.12 5.12v66.56a5.12 5.12 0 0 0 5.12 5.12h348.16zM716.8 442.88a5.12 5.12 0 0 1-5.12 5.12H363.52a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 852.48a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56z" p-id="20744"></path>'
+                          }
+                        },
+                        {
+                          value: '右',
+                          key: 'right',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M870.4 238.08a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 442.88a5.12 5.12 0 0 1-5.12 5.12h-348.16a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 647.68a5.12 5.12 0 0 1-5.12 5.12h-348.16a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h348.16a5.12 5.12 0 0 1 5.12 5.12v66.56zM870.4 852.48a5.12 5.12 0 0 1-5.12 5.12H158.72a5.12 5.12 0 0 1-5.12-5.12v-66.56a5.12 5.12 0 0 1 5.12-5.12h706.56a5.12 5.12 0 0 1 5.12 5.12v66.56z" p-id="21109"></path>'
+                          }
+
+                        }
+                      ]
+                    },
+                    {
+                      value: '中',
+                      key: 'vertical',
+                      options: [
+                        {
+                          value: '上',
+                          key: 'top',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M896 128v64H128V128h768z"  p-id="26733" data-spm-anchor-id="a313x.search_index.0.i12.15f73a81iQ5Yf3" class="selected"></path><path d="M320 896V256h128v640zM576 768V256h128v512z"  p-id="26734" data-spm-anchor-id="a313x.search_index.0.i13.15f73a81iQ5Yf3" class="selected"></path>'
+                          }
+                        },
+                        {
+                          value: '中',
+                          key: 'center',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M704 682.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-384a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h384z m128-213.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334h-640a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h640z m-128-213.333333a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-384a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h384z" p-id="22974"></path>'
+                          }
+                        },
+                        {
+                          value: '下',
+                          key: 'bottom',
+                          icon: {
+                            type: 'html',
+                            value: '<path d="M896 832v64H128v-64h768z"  p-id="26940"></path><path d="M320 768V128h128v640zM576 768V256h128v512z"  p-id="26941" data-spm-anchor-id="a313x.search_index.0.i17.15f73a81iQ5Yf3" class="selected"></path>'
+                          }
+
+                        }
+                      ]
+                    }
+                  ]
+
+                },
+                componentEvent: {
+                  change: ({ value, configValue, activeComponent }) => {
+                    const { level, vertical } = value;
+
+                    const id = activeComponent?.id;
+                    const levelAlignmentMap = {
+                      左: (component)=> {
+                        component.position.x = '0';
+                        component.componentValue.style.marginLeft = '0'
+                      },
+                      中: (component, w, unit)=> {
+                        component.position.x = '50%';
+                        component.componentValue.style.marginLeft = `-${w / 2}${unit}`
+                      },
+                      右: (component, w, unit)=> {
+                        component.position.x = '100%';
+                        component.componentValue.style.marginLeft = `-${w}${unit}`
+                      }
+                    }
+                    const verticalAlignmentMap = {
+                      上: (component)=> {
+                        component.position.y = '0';
+                        component.componentValue.style.marginTop = '0'
+                      },
+                      中: (component, h, unit)=> {
+                        component.position.y = '50%';
+                        component.componentValue.style.marginTop = `-${h / 2}${unit}`
+                      },
+                      下: (component, h, unit)=> {
+                        component.position.y = '100%';
+                        component.componentValue.style.marginTop = `-${h}${unit}`
+                      }
+                    }
+                    const componentList = store.componentStore.componentData.filter(item => item.parentId === id);
+                    componentList?.forEach(item => {
+
+                      const w = item.position.w
+                      if (typeof w !== 'number') {
+                        const marginLeft = item.position.w.match(/^(\d+)([a-zA-Z%]+)$/)
+                        const w = marginLeft[1];
+                        const unit = marginLeft[2] || 'px';
+                        levelAlignmentMap[level](item, w, unit)
+                      } else {
+                        levelAlignmentMap[level](item, w, 'px')
+                      }
+
+
+                      const h = item.position.h
+                      if (typeof h !== 'number') {
+                        const marginTop = item.position.h.match(/^(\d+)([a-zA-Z%]+)$/)
+                        const h = marginTop[1];
+                        const unit2 = marginTop[2] || 'px';
+                        verticalAlignmentMap[vertical](item, h, unit2)
+                      } else {
+                        verticalAlignmentMap[vertical](item, h, 'px')
+                      }
+
+                    })
+                  }
+                },
+                show: (values)=>{
+                  return values.display === 'block'
+                }
+
+
+              },
+              {
+                label: '横向',
+                key: 'justifyContent',
+                value: 'flex-start',
+                componentType: 'Input',
+                show: false
+              },
+              {
+                label: '纵向',
+                key: 'alignItems',
+                value: 'flex-start',
+                componentType: 'Input',
+                show: false
+              },
+              {
+                label: '分布方式',
+                key: 'distribution',
+                value: '',
+                componentType: 'Radio',
+                componentProps: {
+                  type: 'button',
+                  options: [
+                    {
+                      label: '两端',
+                      value: 'space-between',
+                      icon: {
+                        type: 'html',
+                        value: '<path d="M804.540632 107.789474v862.315789c0 29.749895 24.845474 53.894737 55.457684 53.894737h27.701895C918.366316 1024 943.157895 999.855158 943.157895 970.105263V107.789474c0-29.749895-24.791579-53.894737-55.457684-53.894737h-27.701895c-30.612211 0-55.457684 24.144842-55.457684 53.894737zM80.842105 118.568421v840.757895c0 35.732211 24.791579 64.673684 55.457684 64.673684h27.701895c30.612211 0 55.403789-28.941474 55.40379-64.673684V118.568421c0-35.732211-24.791579-64.673684-55.40379-64.673684h-27.701895C105.633684 53.894737 80.842105 82.836211 80.842105 118.568421zM563.307789 296.421053v485.052631c0 29.749895 24.791579 53.894737 55.457685 53.894737h27.701894c30.612211 0 55.457684-24.144842 55.457685-53.894737v-485.052631c0-29.749895-24.791579-53.894737-55.457685-53.894737h-27.701894c-30.612211 0-55.457684 24.144842-55.457685 53.894737zM322.074947 308.385684v461.123369c0 36.378947 24.791579 65.859368 55.457685 65.859368h27.701894c30.612211 0 55.403789-29.480421 55.40379-65.859368V308.385684c0-36.378947-24.791579-65.859368-55.40379-65.859368h-27.701894c-30.612211 0-55.457684 29.480421-55.457685 65.859368z" p-id="7686"></path>'
+                      }
+                    },
+                    {
+                      label: '均分',
+                      value: 'space-around',
+                      icon: {
+                        type: 'html',
+                        value: '<path d="M358.4 804.571429H160.914286V219.428571H365.714286v585.142858z m-124.342857-73.142858H292.571429V292.571429h-58.514286v438.857142zM658.285714 892.342857H460.8V131.657143H658.285714v760.685714z m-124.342857-73.142857H585.142857V204.8h-51.2v614.4zM958.171429 738.742857h-204.8V285.257143h204.8v453.485714z m-124.342858-73.142857h58.514286V358.4h-58.514286v307.2z" p-id="8860"></path>'
+                      }
+                    }
+
+                  ]
+                },
+                componentEvent: {
+                  change({value, configValue}) {
+                    configValue.justifyContent = value;
+                    configValue['flex-alignment'].justifyContent = ''
+
+                  }
+                }
+              },
+              {
+                label: '内容超出',
+                key: 'content-exceeds',
+                value: 'scroll',
+                componentType: 'Select',
+                componentProps: {
+                  type: 'button',
+                  options: [
+                    {
+                      label: '显示',
+                      value: 'nowrap'
+                    },
+                    {
+                      label: '换行',
+                      value: 'wrap'
+                    },
+                    {
+                      label: '隐藏',
+                      value: 'hidden'
+                    },
+                    {
+                      label: '滚动',
+                      value: 'scroll'
+                    }
+                  ]
+
+                },
+                componentEvent: {
+                  change: ({ configValue, value }) => {
+                    if (!value) {
+                      configValue.overflow = 'none';
+                      return
+                    }
+                    const map = {
+                      nowrap: ()=>{
+                        configValue.flexWrap = 'nowrap';
+                        configValue.overflow = 'visible';
+                      },
+                      wrap: ()=>{
+                        configValue.flexWrap = 'wrap';
+                        configValue.overflow = 'visible';
+                      },
+                      hidden: ()=>{
+                        configValue.flexWrap = 'nowrap';
+                        configValue.overflow = 'hidden';
+                      },
+                      scroll: ()=>{
+                        configValue.flexWrap = 'nowrap';
+                        configValue.overflow = 'scroll';
+                        configValue.scrollPosition = 'auto';
+                      }
+                    }
+                    map[value]?.()
+                  }
+                }
+              },
+              {
+                label: '内容间距',
+                key: 'gapNumber',
+                value: '',
+                componentType: 'InputNumber',
+                componentProps: {
+                  tip: '设计视图中默认10px,如果此属性设置了值大于0,将会覆盖设计视图中的值',
+                  min: 0
+                }
+              },
+              {
+                label: '滚动条位置',
+                key: 'scrollPosition',
+                value: 'auto',
+                componentType: 'Radio',
+                componentProps: {
+                  type: 'button',
+                  options: [
+                    {
+                      label: '横向',
+                      value: 'overflow-x'
+                    },
+                    {
+                      label: '纵向',
+                      value: 'overflow-y'
+                    },
+                    {
+                      label: '自动',
+                      value: 'auto'
+                    }
+                  ]
+                },
+                show: (values)=>values['content-exceeds'] === 'scroll'
+              },
+              {
+                label: '换行',
+                key: 'flexWrap',
+                value: 'nowrap',
+                componentType: 'Input',
+                show: false
+              },
+              {
+                label: '超出隐藏',
+                key: 'overflow',
+                value: 'visible',
+                componentType: 'Input',
+                show: false
+              }
+
+            ]
+          }
+          // {
+          //   label: '数据列配置',
+          //   key: 'dataColumns',
+          //   componentType: 'Tab',
+          //   componentProps: {
+          //     tabPosition: 'left'
+          //   },
+          //   componentEvent: {
+          //   },
+          //   children: [
+          //     {
+          //       label: '数据列',
+          //       key: 'column',
+          //       children: [
+          //         {
+          //           key: 'columnConfig',
+          //           value: '',
+          //           componentType: 'DragTab',
+          //           componentProps: {
+          //             concatProps: {
+          //               label: 'label',
+          //               show: 'show',
+          //               key: 'key',
+          //               sort: 'sort'
+          //             },
+          //             configValues: ()=>{
+          //               return []
+          //             }
+          //           },
+          //           baseConfig: [
+          //             {
+          //               key: 'sort',
+          //               show: false
+          //             },
+          //             {
+          //               key: 'key',
+          //               show: false
+          //             },
+          //             {
+          //               label: '显示',
+          //               key: 'show',
+          //               value: {
+          //                 value: true,
+          //                 expression: []
+          //               },
+          //               componentType: 'Switch',
+          //               expression: {
+          //                 type: 'boolean'
+          //               }
+          //             },
+          //             {
+          //               label: '标签',
+          //               key: 'label',
+          //               value: '',
+          //               componentType: 'Input'
+          //             }
+          //           ],
+          //           tabChildren: [
+          //           ]
+          //         }
+          //       ]
+          //     }
+          //   ]
+          // },
+          // {
+          //   label: '测试',
+          //   key: '6786',
+          //   value: {
+          //     value: '1',
+          //     expression: []
+          //   },
+          //   componentType: 'Select',
+          //   componentProps: {
+          //     options: [
+          //       {
+          //         label: '是',
+          //         value: '1'
+          //       },
+          //       {
+          //         label: '否',
+          //         value: '0'
+          //       }
+          //     ]
+          //   },
+          //   expression: {
+          //     type: 'boolean',
+          //     options: [
+          //       {
+          //         label: '表格行',
+          //         value: 'tableRow',
+          //         data: [
+          //           {
+          //             label: 'name',
+          //             value: 'name'
+          //           }
+          //         ]
+          //       }
+          //     ]
+          //   }
+          // }
+          // {
+          //   label: '测试数据模型',
+          //   key: 'model',
+          //   value: '',
+          //   builtinComponentType: 'DataModel'
+          // }
+          // {
+          //   label: '测试数据模型',
+          //   key: 'model2',
+          //   value: '',
+          //   builtinComponentType: 'DataModel'
+          // }
+        ],
+        event: [
+          {
+            label: '点击时',
+            key: 'click',
+            value: ()=>{}
+          },
+          {
+            label: '加载前',
+            key: 'onBeforeMount',
+            value: ()=>{}
+          }
+        ]
+      }
+
+    }
+
+  },
+  render({ component }) {
+    return component.mode === 'Design' ? Index : RenderComponent
+  }
+}