magic-page-designer
Version:
magic-page-designer 是一个基于 vue 的在线页面快速开发平台,主要把所有的 vue 代码都改为在线配置,最终获得一个 json 格式的页面,你可以把它存放到服务器的任何地方:数据库、静态文件、redis 等。最方便的是可以在线修改页面,再也不用担心生产出问题了,还得打开 IDE,修改测试打包,直接在线编码,所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用,完全抛弃 IDE,随时随地 code w
153 lines (150 loc) • 4.12 kB
text/typescript
import { ComponentGroupInfo, ConfigDetailType } from '../page-object'
import { getBooleanSelect, getSizeSelect } from '@/library/ant'
const data: ComponentGroupInfo = {
id: 'general',
title: '通用',
list: [
{
id: 'a-button-group',
title: '按钮组',
ext: {
childrenComponent: ['a-button'],
componentConfig: [
{
type: 'attr',
name: 'size',
group: 'general',
inputList: [getSizeSelect()]
}
]
}
},
{
id: 'a-button',
title: '按钮',
mpdConfig: {
text: '按钮Text'
},
ext: {
childrenComponent: [],
componentConfig: [
{
type: 'attr',
title: '按钮失效状态',
name: 'disabled',
group: 'general',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '幽灵属性',
name: 'ghost',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '原生type值',
name: 'htmlType',
help:
'设置 button 原生的 type 值,可选值请参考 HTML 标准。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type'
},
{
type: 'attr',
title: '按钮的图标类型',
name: 'icon'
},
{
type: 'attr',
title: '按钮载入状态',
name: 'loading',
group: 'general',
help: 'boolean | { delay: number }',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '按钮形状',
name: 'shape',
group: 'general',
inputList: [
{
title: 'Select',
component: ConfigDetailType.Select,
attr: {
allowClear: true,
options: [
{
value: 'circle',
label: 'circle'
},
{
value: 'round',
label: 'round'
}
]
}
}
]
},
{
type: 'attr',
title: '按钮大小',
name: 'size',
group: 'general',
inputList: [getSizeSelect()]
},
{
type: 'attr',
title: '按钮类型',
name: 'type',
group: 'general',
inputList: [
{
title: 'Select',
component: ConfigDetailType.Select,
attr: {
allowClear: true,
options: [
{
value: 'default',
label: 'default'
},
{
value: 'primary',
label: 'primary'
},
{
value: 'dashed',
label: 'dashed'
},
{
value: 'danger',
label: 'danger'
},
{
value: 'link',
label: 'link'
}
]
}
}
]
},
{
type: 'attr',
title: '宽度占满父元素',
name: 'block',
group: 'general',
inputList: [getSizeSelect()]
},
{
type: 'event',
title: '点击按钮时的回调',
name: 'click'
}
]
}
}
]
}
export default data