各位大佬，请教 vue3中 使用amis sdk 渲染器 + amis 编辑器 ，如何使自定义组件 在编辑器和渲染器中都能识别？

[wfxs2012]

实现场景：

项目使用技术： vue3+ vite 想要实现的功能：

1. amis 编辑器： 因为没发现有 sdk版本的 amis-editor 所以 在vue3 中通过 amis-editor + veaury 引入，
2. amis 渲染器： 使用 amis sdk 方式 引入， 用什么方式开发自定义组件， 在编辑器里识别可用， 同时渲染器又能正确渲染？

存在的问题：

1. amis 编辑器可以识别 自定义组件，
2. amis 渲染器 无法正确渲染

当前方案：

目前的方式使用 vue3-amis-widget 创建自定义组件，通过 registerRendererByType ，registerAmisEditorPlugin 注册 ``

代码

demo.vue 

<template>
  <div>demo</div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {},
};
</script>

<style scoped lang="scss"></style>

==================================================

plugin.ts

// @ts-ignore
import { registerAmisEditorPlugin } from 'vue3-amis-widget';

export class epTabsPlugin {
  rendererName = 'demo';
  // 暂时只支持这个，配置后会开启代码编辑器
  $schema = '/schemas/UnkownSchema.json';
  name = 'demo';
  description = 'demo组件';
  tags = ['自定义', '表单项'];
  icon = 'fa fa-file-code-o';
  // 用来生成预览图的
  previewSchema = {
    type: 'demo',
    label: '测试',
  };
  // 拖入组件里面时的初始数据
  scaffold = {
    type: 'demo',
    list: ['demo1', 'demo2'],
  };

  // 右侧面板相关
  panelTitle = 'demo组件';
}
registerAmisEditorPlugin(epTabsPlugin);

export default epTabsPlugin;

==================================================

renderer.ts

// @ts-ignore
import demo from './demo.vue';
// @ts-ignore
import { registerRendererByType } from 'vue3-amis-widget';

registerRendererByType(demo, {
  type: 'demo',
  framework: 'vue3',
});

图片 在编辑器中 可以识别 并使用

在渲染器中 无法识别

[github-actions[bot]]

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.