magic-page-designer
Version:
magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w
329 lines (325 loc) • 8.92 kB
text/typescript
import { PageDom, ConfigDetailType } from '@/library/page-object'
import { getBooleanSelect, getSizeSelect } from '@/library/ant'
const groupName: Array<string> = ['样式']
const data: PageDom = {
id: 'a-select',
title: '选择器',
mpdConfig: {
slot: []
},
ext: {
componentConfig: [
{
type: 'attr',
title: 'options数据',
name: 'options',
help: '如果设置则不需要手动构造 selectOption 节点。array<{value, label, [disabled, key, title]}>'
},
{
type: 'attr',
title: '提示信息',
name: 'placeholder',
group: 'general'
},
{
type: 'attr',
title: '支持清除',
name: 'allowClear',
group: 'general',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
name: 'autoClearSearchValue',
help: '是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '默认获取焦点',
name: 'autoFocus',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
name: 'defaultActiveFirstOption',
help: '是否默认高亮第一个选项',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '指定默认选中的条目',
name: 'defaultValue'
},
{
type: 'attr',
title: '是否禁用',
name: 'disabled',
group: 'general',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
name: 'dropdownClassName',
group: groupName[0],
help: '下拉菜单的 className 属性'
},
{
type: 'attr',
title: '下拉菜单和选择器同宽',
name: 'dropdownMatchSelectWidth',
group: groupName[0],
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '自定义下拉框内容',
name: 'dropdownRender'
},
{
type: 'attr',
title: '下拉菜单的style属性',
group: groupName[0],
name: 'dropdownStyle'
},
{
type: 'attr',
title: 'dropdown菜单自定义样式',
group: groupName[0],
name: 'dropdownMenuStyle'
},
{
type: 'attr',
title: '是否根据输入项进行筛选',
name: 'filterOption',
help:
'当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '默认高亮的选项',
name: 'firstActiveValue'
},
{
type: 'attr',
title: '菜单渲染父节点',
name: 'getPopupContainer',
group: groupName[0],
help: '默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位'
},
{
type: 'attr',
name: 'labelInValue',
help:
'是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes} 的格式'
},
{
type: 'attr',
title: '最多显示多少个tag',
name: 'maxTagCount',
inputList: [
{
title: '数字框',
component: ConfigDetailType.InputNumber
}
]
},
{
type: 'attr',
title: '隐藏tag时显示的内容',
name: 'maxTagPlaceholder'
},
{
type: 'attr',
title: '最大显示的tag文本长度',
name: 'maxTagTextLength',
inputList: [
{
title: '数字框',
component: ConfigDetailType.InputNumber
}
]
},
{
type: 'attr',
title: 'Select的模式',
name: 'mode',
group: 'general',
help: '设置 Select 的模式为多选或标签',
inputList: [
{
title: 'Select',
component: ConfigDetailType.Select,
attr: {
allowClear: true,
options: [
{
value: 'default',
label: 'default'
},
{
value: 'multiple',
label: 'multiple'
},
{
value: 'tags',
label: 'tags'
},
{
value: 'combobox',
label: 'combobox'
}
]
}
}
]
},
{
type: 'attr',
title: '下拉列表为空时的内容',
name: 'notFoundContent'
},
{
type: 'attr',
name: 'optionFilterProp',
help: '搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索'
},
{
type: 'attr',
name: 'optionLabelProp',
help:
'回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。（combobox 模式下为 value）'
},
{
type: 'attr',
title: '使单选模式可搜索',
name: 'showSearch',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '是否显示下拉小箭头',
name: 'showArrow',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '选择框大小',
name: 'size',
group: 'general',
inputList: [getSizeSelect()]
},
{
type: 'attr',
title: '选择框后缀图标',
name: 'suffixIcon',
group: groupName[0],
help: 'VNode | slot'
},
{
type: 'attr',
title: '多选框清除图标',
name: 'removeIcon',
group: groupName[0],
help: 'VNode | slot'
},
{
type: 'attr',
title: '多选框清空图标',
name: 'clearIcon',
group: groupName[0],
help: 'VNode | slot'
},
{
type: 'attr',
title: '选中的条目图标',
name: 'menuItemSelectedIcon',
group: groupName[0],
help: 'VNode | slot'
},
{
type: 'attr',
name: 'tokenSeparators',
group: groupName[0],
help: 'string[]，在 tags 和 multiple 模式下自动分词的分隔符'
},
{
type: 'model',
title: '选中的条目',
name: 'value'
},
{
type: 'attr',
title: '是否默认展开下拉菜单',
name: 'defaultOpen',
inputList: [getBooleanSelect()]
},
{
type: 'attr',
title: '是否展开下拉菜单',
name: 'open',
inputList: [getBooleanSelect()]
},
{
type: 'event',
title: '失去焦点时回调',
name: 'blur'
},
{
type: 'event',
title: '值变化时回调',
name: 'change',
help: '选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数'
},
{
type: 'event',
title: '取消选中时回调',
name: 'deselect',
help: '参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效'
},
{
type: 'event',
title: '获得焦点时回调',
name: 'focus'
},
{
type: 'event',
title: '键盘按下时回调',
name: 'inputKeydown'
},
{
type: 'event',
title: '鼠标移入时回调',
name: 'mouseenter'
},
{
type: 'event',
title: '鼠标移出时回调',
name: 'mouseleave'
},
{
type: 'event',
title: '下拉列表滚动时的回调',
name: 'popupScroll'
},
{
type: 'event',
title: '文本框值变化时回调',
name: 'search'
},
{
type: 'event',
title: '被选中时调用',
name: 'select',
help: '参数为选中项的 value (或 key) 值'
},
{
type: 'event',
title: '展开下拉菜单的回调',
name: 'dropdownVisibleChange'
}
]
}
}
export default data