更新时间:2024-05-10 GMT+08:00
组件响应动作实现
组件除了可以作为事件的触发器,还可以处理事件的响应动作,在响应动作中选择组件响应,就可以选择对应的组件响应动作,数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。
注册动作
图1 响应动作
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000001921999313.png)
/** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params this: 组件实例 * @params "setSelectedItem": 动作名称 * @params { zh_CN: "设置选中选项", en_US: "Set Selected item" }:响应动作的描述,需要国际化 * @params [{ name: "itemVal", type: "text" }]:配置动作时可以配置itemVal的值为${e.xxx}将事件抛出的xxx参数复制到itemVal中,然后select组件内统一从itemVal获取数据 * @params this.setSelectVal.bind(this): this.setSelectVal 为响应动作函数 */ Studio.registerAction( this, "setSelectedItem", { zh_CN: "设置选中选项", en_US: "Set Selected item" }, [{ name: "itemVal", type: "text" }], // 配置动作时可以配置itemVal的值为${e.xxx}将事件抛出的xxx参数复制到itemVal中。然后select组件内统一从itemVal获取数据 this.setSelectVal.bind(this) );
响应动作函数
/** * 数据刷新的响应动作函数示例 * 文件global_SelectWidget.js中, 与render函数平级定义 * @params event: 保存着事件发出的参数,itemVal为配置动作时将事件抛出的参数复制到itemVal中 */ setSelectVal(event) { this.readerVm.$set(this.readerVm.selectConf, "selectValue", event.itemVal); },