magic-page-designer/src/library/ant/data-entry/radio.ts

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

import { PageDom, ConfigDetailType } from '@/library/page-object'
import { getBooleanSelect, getSizeSelect } from '@/library/ant'

const data: Array<PageDom> = [
  {
    id: 'a-radio-group',
    title: '单选框组',
    ext: {
      childrenComponent: ['a-radio'],
      componentConfig: [
        {
          type: 'attr',
          title: '默认选中的值',
          name: 'defaultValue',
          group: 'general'
        },
        {
          type: 'attr',
          title: '禁选所有子单选器',
          name: 'disabled',
          group: 'general',
          inputList: [getBooleanSelect()]
        },
        {
          type: 'attr',
          title: 'name属性',
          name: 'name',
          group: 'general',
          help: 'RadioGroup 下所有 input[type="radio"] 的 name 属性'
        },
        {
          type: 'attr',
          title: '以配置形式设置子元素',
          name: 'options',
          group: 'general',
          help: 'string[] | Array<{ label: string value: string disabled?: boolean }>'
        },
        {
          type: 'attr',
          title: '选择框大小',
          name: 'size',
          group: 'general',
          inputList: [getSizeSelect()]
        },
        {
          type: 'model',
          title: '当前选中的值',
          name: 'value'
        },
        {
          type: 'attr',
          title: 'RadioButton的风格样式',
          name: 'buttonStyle',
          group: 'general',
          help: '目前有描边和填色两种风格',
          inputList: [
            {
              title: 'Select',
              component: ConfigDetailType.Select,
              attr: {
                allowClear: true,
                options: [
                  {
                    value: 'outline',
                    label: 'outline'
                  },
                  {
                    value: 'solid',
                    label: 'solid'
                  }
                ]
              }
            }
          ]
        },
        {
          type: 'event',
          title: '值变化时回调',
          name: 'change',
          help: 'Function(e:Event)'
        }
      ]
    }
  },
  {
    id: 'a-radio',
    title: '单选框',
    ext: {
      componentConfig: [
        {
          type: 'attr',
          title: '自动获取焦点',
          name: 'autoFocus',
          group: 'general',
          inputList: [getBooleanSelect()]
        },
        {
          type: 'attr',
          title: '是否选中',
          name: 'checked',
          group: 'general',
          inputList: [getBooleanSelect()]
        },
        {
          type: 'attr',
          title: '初始是否选中',
          name: 'defaultChecked',
          group: 'general',
          inputList: [getBooleanSelect()]
        },
        {
          type: 'attr',
          title: '值',
          name: 'value',
          group: 'general'
        }
      ]
    }
  }
]

export default data