自定义设计器物料组件

// 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>
   `,
    },
  },
]