1.0.1 • Published 8 months ago
@kesplus/materials v1.0.1
自定义设计器物料组件
// material.config.js
import Element from './element'
export default [Element]
// element.js
import Form from './el-form'
export default {
name: 'ElementPlus',
key: 'element',
/**
* @link /interfaces/AssertGroup.html
*/
assetGroups: [
{
name: '表单',
key: 'general',
assets: [].concat(Form),
},
],
}
// el-form.js
import { ElementPlus } from '@element-plus/icons-vue'
export default [
{
name: '表单',
key: 'el-form',
homepage: 'http://10.12.13.102:9003/zh-CN/component/form.html',
/**
* @link /types/IIcon.html
*/
cover: {
dark: {
shadow:
'<path d="M629.44 291.712V0S0 394.56 0 458.24c0 63.744 629.44 416.64 629.44 416.64V625.088s289.344 4.672 370.304 374.976c84.48-279.104-54.912-693.824-370.304-708.352z m176.768 337.92c-91.392-52.544-172.736-54.464-176.064-54.592l-47.232-0.704V792.192c-229.76-131.2-461.568-275.584-525.44-334.72 62.848-62.912 294.656-222.848 525.44-369.984v252.096l44.544 2.048c132.352 6.144 214.144 90.944 259.52 161.024 55.488 85.952 86.912 195.52 90.432 303.232-51.584-91.328-116.8-144.96-171.2-176.256z"></path>',
},
light: '/images/element-plus-logo.svg',
},
/**
* @link /interfaces/IDesignerProps.html
*/
designerProps: {
droppable: true,
/**
* 不允许el-form插入到当前el-form
* @link /interfaces/IDesignerProps.html#allowAppend
*/
allowAppend: (_node, nodes) => !nodes.some((node) => node.tag === 'el-form'),
/**
* 属性区配置
* @link /interfaces/IDesignerProps.html#schema
*/
schema: {
type: 'object',
properties: {
model: {
type: 'string',
title: '绑定属性',
required: true,
'x-component': 'Input',
'x-decorator': 'FormItem',
},
inline: {
type: 'boolean',
title: '行内表单模式',
enum: [true, false],
'x-component': 'Select',
'x-component-props': { clearable: true },
'x-decorator': 'FormItem',
},
labelWidth: {
type: 'number',
title: '标签的长度',
'x-component': 'Input',
'x-component-props': { clearable: true },
'x-decorator': 'FormItem',
},
},
},
},
data: {
code: `<el-form label-width="120px">
<el-form-item label="表单项">
<el-input />
</el-form-item>
</el-form>
<el-divider />
`,
},
},
{
name: '表单项',
key: 'el-form-item',
homepage: 'http://10.12.13.102:9003/zh-CN/component/form.html',
cover: ElementPlus,
designerProps: {
droppable: true,
/**
* 必须放到el-form下面
* @document /interfaces/IDesignerProps.html#allowDrop
*/
allowDrop: (node) => {
while (node !== node.root) {
if (node.tag === 'el-form') return true
node = node.parent
}
return false
},
actions: [
{
title: '前置插入',
/**
* 在当前 el-form-item 后面插入一个
* @link /interfaces/IDesignerAction.html#onClick
*/
onClick: (node) => {
node.insertBefore({
contains: () => false,
isMaterialNode: true,
mometa: {
code: `
<el-form-item label="${Date.now()}">
<el-input />
</el-form-item>`,
},
})
},
},
],
schema: {
type: 'object',
properties: {
label: {
type: 'string',
title: '标题',
required: true,
'x-component': 'Input',
'x-component-props': {
clearable: true,
},
'x-decorator': 'FormItem',
},
labelWidth: {
type: 'number',
title: '标签的长度',
'x-component': 'Input',
'x-component-props': { clearable: true },
'x-decorator': 'FormItem',
},
},
},
},
data: {
code: `
<el-form-item label="表单项">
<el-input />
</el-form-item>
`,
},
},
]
1.0.1
8 months ago