aisuda / amis-widget

amis组件注册器(支持react、vue2.0、vue3.0和jQuery技术栈),主要用于注册amis渲染器、amis-editor插件。
95 stars 38 forks source link

自定义 vue 组件 使用onEvent 触发actions 不生效 #27

Closed minzhenyu closed 1 year ago

minzhenyu commented 1 year ago

@wibetter

自定义 vue 组件 使用onEvent 触发actions 不生效
版本 amis sdk @ 2.7.2

json: { "type": "form", "title": "表单", "body": [ { "label": "文本框", "type": "input-text", "name": "text" }, { "type": "datamodel-select", "label": "模型下拉-数据", "name": "datamodel-select", "id": "u:65a6bf9c0d15", "option": { "datatype": "xxx", "apiCode": "xxxxxx", "label": "linkName", "value": "linkCode", "multiple": false, "filterCondition": [ ], "valueBackFill": [ { "field": "pkId", "target": "text" } ], "fetchUrl": "xxxx", "fetchMethod": "post" }, "onEvent": { "change": { // 监听点击事件 "actions": [ // 执行的动作列表 { "actionType": "toast", // 执行toast提示动作 "args": { // 动作参数 "msgType": "info", "msg": "派发点击事件" } } ] }, "onChange": { // 监听点击事件 "actions": [ { "script": "alert(1)", "actionType": "custom" }, { "actionType": "custom", "script": "alert(0)" }, // 执行的动作列表 { "actionType": "toast", // 执行toast提示动作 "args": { // 动作参数 "msgType": "info", "msg": "派发点击事件" } } ] } } } ], "id": "u:fbc6d0fec7b3", "debug": true }

问题: onChange 触发了里面的值也设置进form了,但是actions 没触发,也不报错

怎么才能事件触发amis 的actions

minzhenyu commented 1 year ago

https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%8E%A5%E5%85%A5%E4%BA%8B%E4%BB%B6%E5%8A%A8%E4%BD%9C 找到了一个方案,使用 dispatchEvent 触发 this.$emit('dispatchEvent', 'onChange', '222') this.$emit('dispatchEvent', 'change', '333') this.$emit('dispatchEvent', 'toast')

不过深层次循环嵌套不知道会不会有问题,需要在组件里面自己写方法去触发

但是上面的方法涉及到动态触发也会有问题,如何通过选中的item ,自动触发回填到其他组件(name: item[selectFied]) 方式

wibetter commented 1 year ago

看贴出来的json,感觉你对amis的事件动作理解不太对,可以先看下这个文档,自定义组件如何对接amis事件动作:https://aisuda.github.io/aisuda-docs/NPM%E7%BB%84%E4%BB%B6%E6%89%A9%E5%B1%95%E5%8C%85/%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E5%AF%B9%E6%8E%A5amis%E4%BA%8B%E4%BB%B6%E5%8A%A8%E4%BD%9C#%E4%BA%8C%E5%85%B6%E4%BB%96%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E8%A7%A6%E5%8F%91%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8A%A8%E4%BD%9C