@formily/vue不支持ant-design-vue自定义事件

[hingjip]

版本

• @formily/vue：2.0.0-beta.43
• ant-design-vue：1.6.4

问题描述

@formily/vue的Field目前仅支持onChange、onFocus和onBlur，但ant-design-vue的select组件有search、dropdownVisibleChange之类的自定义事件，无法注册相关的自定义事件到生成的Field上

参考文档

• ant-design-vue select组件：https://www.antdv.com/components/select-cn/

[hingjip]

自己找到解决办法了，利用@formily/vue API shared的connect去扩展，模仿mapProps实现一个mapListeners映射器，把自定义的事件映射进去，不过比较麻烦，希望以后能原生支持传入自定义事件

[janryWang]

为啥不能直接把事件传给组件属性上？<Field component={[Select,{dropdownVisibleChange:()=>{}}]}/> 类似这种

[MisicDemone]

为啥不能直接把事件传给组件属性上？<Field component={[Select,{dropdownVisibleChange:()=>{}}]}/> 类似这种

vue的event和props是分开的，这样传dropdownVisibleChange会当做prop传给子组件。需要约定一种格式，比如@xxx，一但fomily-vue遇到这种prop就自动转成event。（这里不能约定成onXxx是因为有的组件会存在on开头的prop，比如element的upload组件）这个需要下版本实现一下，目前还不支持。

[janryWang]

👌，懂了

[MisicDemone]

field上的change,focus,blur三个事件是自动注册到组件上的，额外的事件注册后续版本可能会做透传（暂不确定具体实现）。目前可以在组件注册到formily之前通过 functional component提前对事件做一下映射

[MisicDemone]

可参考：

https://vue.formilyjs.org/questions/#%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6