简述VUE工程使用无界微前端集成Amis过程

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import {BasePlugin} from 'amis-editor-core';
import '@/renderer/MyRenderer'; // 渲染器

export default class MyRenderer extends BasePlugin {
  rendererName = 'my-renderer1';

  // 暂时只支持这个，配置后会开启代码编辑器
  $schema = '/schemas/UnkownSchema.json';

  // 用来配置名称和描述
  name = '自定义渲染器';
  description = '这只是个示例';

  // tag，决定会在哪个 tab 下面显示的
  tags = ['自定义', '自定义UI'];

  // 图标
  icon = 'fa fa-user';

  // 用来生成预览图的
  previewSchema = {
    type: 'my-renderer1',
    target: 'demo' // 复杂业务组件拖动
  };

  // 拖入组件里面时的初始数据
  scaffold = {
    type: 'my-renderer1',
    target: '233'
  };

  // 右侧面板相关
  panelTitle = '自定义组件';
  panelControls = [
    {
      type: 'tabs',
      tabsMode: 'line',
      className: 'm-t-n-xs',
      contentClassName: 'no-border p-l-none p-r-none',
      tabs: [
        {
          title: '常规',
          controls: [
            {
              name: 'target',
              label: 'Target',
              type: 'text'
            }
          ]
        },

        {
          title: '外观',
          controls: []
        }
      ]
    }
  ];
}

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
import {Renderer} from 'amis';
import {RendererProps} from 'amis';
import React from 'react';

export interface MyRendererProps extends RendererProps {
  target?: string;
}

export default class MyRenderer extends React.Component<MyRendererProps> {
  static defaultProps = {
    target: 'world'
  };

  render() {
    const {target} = this.props;
    return <p>Hello {target}! @amis-editor</p>;
  }
}

Renderer({
  type: 'my-renderer1',
  autoVar: true
})(MyRenderer);

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
TypeError: Cannot read properties of undefined (reading 'substring')

    at t (http://localhost/amis/sdk.js:3353:11642)
    at t (http://localhost/amis/sdk.js:2103:1038)
    at form
    at t (http://localhost/amis/sdk.js:2041:24814)
    at r (http://localhost/amis/sdk.js:2029:586)
    at r (http://localhost/amis/sdk.js:2023:5701)
    at t (http://localhost/amis/sdk.js:2103:1038)
    at div
    at div
    at D (http://localhost/amis/sdk.js:2345:1485)
    at div
    at c (http://localhost/amis/sdk.js:2057:259)
    at i (http://localhost/amis/sdk.js:2127:494)
    at t (http://localhost/amis/sdk.js:2351:735)
    at n (http://localhost/amis/sdk.js:2095:1293)
    at r (http://localhost/amis/sdk.js:2063:1570)
    at o (http://localhost/amis/sdk.js:3165:10259)
    at r (http://localhost/amis/sdk.js:2029:586)
    at r (http://localhost/amis/sdk.js:2023:5701)
    at t (http://localhost/amis/sdk.js:2103:1038)
    at n (http://localhost/amis/sdk.js:2107:431)
    at div
    at t (http://localhost/amis/sdk.js:3103:32475)
    at r (http://localhost/amis/sdk.js:2029:586)
    at r (http://localhost/amis/sdk.js:2023:5701)
    at t (http://localhost/amis/sdk.js:2103:1038)
    at div
    at div
    at div
    at div
    at t (http://localhost/amis/sdk.js:3339:13329)
    at r (http://localhost/amis/sdk.js:2029:586)
    at r (http://localhost/amis/sdk.js:2023:5701)
    at t (http://localhost/amis/sdk.js:2103:1038)
    at div
    at div
    at div
    at div
    at t (http://localhost/amis/sdk.js:3339:13329)
    at r (http://localhost/amis/sdk.js:2029:586)
    at r (http://localhost/amis/sdk.js:2023:5701)
    at t (http://localhost/amis/sdk.js:2103:1038)
    at t (http://localhost/amis/sdk.js:2097:533)
    at a (http://localhost/amis/sdk.js:2825:600)
    at n (http://localhost/amis/sdk.js:2095:1293)
    at r (http://localhost/amis/sdk.js:2063:1570)
    at t (http://localhost/amis/sdk.js:2109:492)
    at r (http://localhost/amis/sdk.js:2023:5701)
    at n (http://localhost/amis/sdk.js:2107:431)
    at Ze (http://localhost/amis/sdk.js:2117:2108)
    at div