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

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

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

const data: Array<PageDom> = [
  {
    id: 'a-checkbox-group',
    title: '多选框组',
    mpdConfig: {
      slot: []
    },
    ext: {
      childrenComponent: ['a-checkbox'],
      componentConfig: [
        {
          type: 'attr',
          title: '默认选中的值',
          name: 'defaultValue',
          group: 'general',
          help: 'string[]'
        },
        {
          type: 'attr',
          title: '是否禁用',
          name: 'disabled',
          group: 'general',
          inputList: [getBooleanSelect()]
        },
        {
          type: 'attr',
          title: 'name属性',
          name: 'name',
          group: 'general',
          help: 'CheckboxGroup 下所有 input[type="checkbox"] 的 name 属性'
        },
        {
          type: 'attr',
          title: '以配置形式设置子元素',
          name: 'options',
          group: 'general',
          help:
            '指定可选项，可以通过 slot="label" slot-scope="option" 定制label。string[] | Array<{ label: string value: string disabled?: boolean, indeterminate?: boolean, onChange?: function }>'
        },
        {
          type: 'model',
          title: '当前选中的值',
          name: 'value',
          help: 'string[]'
        },
        {
          type: 'event',
          title: '值变化时回调',
          name: 'change',
          help: 'Function(checkedValue)'
        }
      ]
    }
  },
  {
    id: 'a-checkbox',
    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: 'disabled',
          group: 'general',
          inputList: [getBooleanSelect()]
        },
        {
          type: 'attr',
          title: '设置indeterminate状态',
          name: 'indeterminate',
          help: '只负责样式控制',
          group: 'general',
          inputList: [getBooleanSelect()]
        },
        {
          type: 'event',
          title: '值变化时回调',
          name: 'change',
          help: 'Function(e:Event)'
        }
      ]
    }
  }
]

export default data