文档首页/ Astro大屏应用 AstroCanvas/ 用户指南/ 自定义组件开发规范/ 组件交互/ 组件响应动作实现
更新时间：2024-11-04 GMT+08:00
查看PDF
分享

组件响应动作实现

组件除了可以作为事件的触发器，还可以处理事件的响应动作，在响应动作中选择组件响应，就可以选择对应的组件响应动作，数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍，如何实现组件响应动作。

注册动作

在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。

图1 响应动作 
/**
* 文件global_SelectWidget.js中, 在init钩子中注册响应动作
* @params thisObj: 组件实例
*/
Studio.registerAction(
	thisObj,
	'confirmLocationWidgetCbk',
	'confirmLocationWidgetCbk',
	[],
	$.proxy(thisObj.confirmLocationWidgetCbk, thisObj),
	[],
  );
  Studio.registerAction(thisObj, 'getInputValue', 'getInputValue', [], $.proxy(thisObj.getInputValue, thisObj), []);
  Studio.registerAction(
	thisObj,
	'setInputWidgetValue',
	'setInputWidgetValue',
	[],
	$.proxy(thisObj.setInputWidgetValue, thisObj),
	[],
  );
  Studio.registerAction(
	thisObj,
	'setWidgetProperties',
	'setWidgetProperties',
	[],
	$.proxy(thisObj.setWidgetProperties, thisObj),
	[],
  );
  Studio.registerAction(
	thisObj,
	'setInput',
	'setInput',
	[{ name: 'customizeVal', type: 'text' }],
	$.proxy(thisObj.setInput, thisObj),
	[],
  );

响应动作函数

以数据刷新的响应动作函数为例，向您介绍组件的响应动作函数。

/**
* 数据刷新的响应动作函数示例 
* 文件global_SelectWidget.js中, 与render函数平级定义
*/
confirmLocationWidgetCbk: function (param) {
    if (param && param.eventParam && this.vm) {
      this.vm.getDataEntry(param.eventParam);
    }
  },
// 获取当前输入框值
getInputValue: function () {
if (this.vm && this.vm.selectConfObj) {
  return this.vm.selectConfObj.selectValue;
   }
},
// 设置组件双向绑定的值
setInputWidgetValue: function (value) {
  this.vm.selectConfObj.selectValue = value;
    if (this.editVm?.selectConfObj) {
    this.editVm.selectConfObj.selectValue = value;
 }
this.advanceEditvm?.save();
},
// 更新组件配置
setWidgetProperties: function (selectConfObj) {
magno.savePropertiesForWidget({
  selectConfObj: JSON.stringify(selectConfObj),
  });
},
setInput: function (value) {
  this.vm.selectConfObj.selectValue = value.customizeVal;
  if (this.editVm?.selectConfObj) {
    this.editVm.selectConfObj.selectValue = value.customizeVal;
  }
  this.advanceEditvm?.save();
},
父主题： 组件交互

相关文档