magic-page-designer/src/library/text.ts

magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w

import { ComponentGroupInfo } from './page-object'
import { TextTypeEnum } from '../components/mpd-text/text-object'
import { ConfigDetailType } from './page-object'

const mpdTextOptions = []
for (const key in TextTypeEnum) {
  mpdTextOptions.push({
    value: TextTypeEnum[key],
    label: key
  })
}

const data: ComponentGroupInfo = {
  id: 'text',
  title: '文本',
  list: [
    {
      id: 'mpd-text',
      title: 'Text',
      mpdConfig: {
        text: '在此处修改mpd-text标签内容'
      },
      ext: {
        icon: 'mpd-icon-text-border',
        componentConfig: [
          {
            type: 'attr',
            title: '文本标签类型',
            name: 'type',
            group: 'general',
            defaultValue: 'p',
            inputList: [
              {
                title: 'Select',
                component: ConfigDetailType.Select,
                attr: {
                  options: mpdTextOptions
                }
              }
            ]
          }
        ]
      }
    },
    {
      id: 'mpd-icon',
      title: '字体图标',
      ext: {
        icon: 'mpd-icon-picture',
        componentConfig: [
          {
            type: 'attr',
            title: '图标class',
            name: 'icon',
            group: 'general'
          },
          {
            type: 'attr',
            title: '大小',
            name: 'fontSize',
            group: 'general',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber
              }
            ]
          }
        ]
      }
    }
  ]
}
export default data