amis 函数类注册自定义组件dispatchEvent不能执行绑定的事件,class注册组件没有问题

ztyzrc3y  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(54)
描述问题:dispatchEvent不能执行绑定的事件

请用一段清晰简洁的文字描述问题是什么... 注册vue自定义组件dispatchEvent不能执行绑定的事件

截图或视频:

可以的话,尽可能提供截图或视频来补充描述你的问题...

如何复现(请务必完整填写下面内容):
  1. 你是如何使用 amis 的?
    sdknpm其他 ...
    npm
  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    "amis": "3.4.3",
    "amis-core": "3.4.3",
    "amis-editor": "5.6.1",
    "amis-editor-core": "5.6.1",
  3. 粘贴有问题的完整 amis schema 代码:
code here...
const name = 'ElButton'
function fn(props: any, ref: any) {
    let {$schema: data} = props;
    let dom = React.useRef(null);
    const handleClick = (nativeEvent: React.MouseEvent<any>) => {
      let {dispatchEvent} = props;
      dispatchEvent(nativeEvent, {});
    };
    React.useEffect(function () {
      let newProps: {
        [index: string]: any;
      } = {};
      Object.keys(data).forEach(key => {
        if (!key.startsWith('$')) {
          if (key === 'componentType') {
            newProps['type'] = data[key];
          } else {
            newProps[key] = data[key];
          }
        }
      });
      const app = createApp({
        render: () => {
          return h(
            ElementPlus[name],
            {
              ...newProps,
              ref,
              onclick: handleClick
            },
            newProps.label
          );
        }
      });
      app.mount(dom.current);
      return () => app.unmount();
    });
    return React.createElement('div', {
      ref: dom
    });
  }
  Renderer({
    test: new RegExp(`${name}`),
    name: name
  })(React.forwardRef(fn));

class FnPlugin extends BasePlugin {
    // 关联渲染器名字
    rendererName = name;
    $schema = '/schemas/ActionSchema.json';
    order = -400;
    // 组件名称
    name = name;
    description =
      '用来展示一个按钮,你可以配置不同的展示样式,配置不同的点击行为。';
    docLink = '/amis/zh-CN/components/button';
    tags = ['brick-ui'];
    icon = 'fa fa-square';
    pluginIcon = 'button-plugin';
    panelTitle = name;
    // 事件定义
    events: RendererPluginEvent[] = [
      {
        eventName: 'click',
        eventLabel: '点击',
        description: '点击时触发',
        defaultShow: true,
        dataSchema: [
          {
            type: 'object',
            properties: {
              nativeEvent: {
                type: 'object',
                title: '鼠标事件对象'
              }
            }
          }
        ]
      },
      {
        eventName: 'mouseleave',
        eventLabel: '鼠标移出',
        description: '鼠标移出时触发',
        dataSchema: [
          {
            type: 'object',
            properties: {
              nativeEvent: {
                type: 'object',
                title: '鼠标事件对象'
              }
            }
          }
        ]
      }
    ];

    // 动作定义
    actions: RendererPluginAction[] = [];

    panelJustify = true;

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    panelBodyCreator = (context: BaseEventContext) => {
      return getSchemaTpl('tabs', [
        {
          title: '属性',
          body: config[name].attribute || [
            getSchemaTpl('label', {
              label: '按钮名称'
            }),
            {
              type: 'input-text',
              label: '字段名称',
              name: 'name'
            },
            {
              type: 'select',
              label: '按钮类型',
              name: 'componentType',
              options: [
                {
                  label: '默认',
                  value: 'primary'
                },
                {
                  label: '危险',
                  value: 'danger'
                },
                {
                  label: '警告',
                  value: 'warn'
                },
                {
                  label: '成功',
                  value: 'success'
                },
                {
                  label: '浅色',
                  value: 'default'
                }
              ],
              multiple: false,
              selectFirst: false
            },
            {
              type: 'input-text',
              label: '按钮图标',
              name: 'icon',
              // 提示
              labelRemark: {
                icon: 'icon-close',
                trigger: ['hover'],
                className: 'Remark--warning',
                title: '提示',
                content:
                  '图标请从My Iconfont库中选择 部分图标需要加icon-前缀 如close -> icon-close'
              }
            }
          ]
        },
        {
          title: '样式',
          body: [
            getSchemaTpl('buttonLevel', {
              label: '高亮样式',
              name: 'activeLevel',
              visibleOn: 'data.active'
            }),

            getSchemaTpl('switch', {
              name: 'block',
              label: '块状显示'
            }),

            getSchemaTpl('size', {
              label: '尺寸'
            })
          ]
        },
        {
          title: '事件',
          className: 'p-none',
          body:
            !!context.schema.actionType ||
            ['submit', 'reset'].includes(context.schema.type)
              ? [
                  getSchemaTpl('eventControl', {
                    name: 'onEvent',
                    ...getEventControlConfig(this.manager, context)
                  })
                  // getOldActionSchema(this.manager, context)
                ]
              : [
                  getSchemaTpl('eventControl', {
                    name: 'onEvent',
                    ...getEventControlConfig(this.manager, context)
                  })
                ]
        }
      ]);
    };
    
  }
  1. 操作步骤
    请简单描述一下复现的操作步骤...
    给按钮通过右侧面板绑定点击事件,点击按钮绑定的事件不执行
lnvxswe2

lnvxswe21#

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

Please review the labels and make any necessary changes.

oprakyz7

oprakyz72#

使用react写法事件可以执行

pgccezyw

pgccezyw3#

@2betop 可以帮忙看下吗

yzckvree

yzckvree4#

@nwind 可以帮忙看下吗

相关问题