描述问题:dispatchEvent不能执行绑定的事件
请用一段清晰简洁的文字描述问题是什么... 注册vue自定义组件dispatchEvent不能执行绑定的事件
截图或视频:
可以的话,尽可能提供截图或视频来补充描述你的问题...
如何复现(请务必完整填写下面内容):
- 你是如何使用 amis 的?
sdk
、npm
或其他
...
npm - amis 版本是什么?请先在最新 beta 版本测试问题是否存在
"amis": "3.4.3",
"amis-core": "3.4.3",
"amis-editor": "5.6.1",
"amis-editor-core": "5.6.1", - 粘贴有问题的完整
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)
})
]
}
]);
};
}
- 操作步骤
请简单描述一下复现的操作步骤...
给按钮通过右侧面板绑定点击事件,点击按钮绑定的事件不执行
4条答案
按热度按时间lnvxswe21#
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
oprakyz72#
使用react写法事件可以执行
pgccezyw3#
@2betop 可以帮忙看下吗
yzckvree4#
@nwind 可以帮忙看下吗