常见问题

1、如何为高代码组件添加主动触发事件

以输入框为例，当获得焦点时主动触发指定方法，具体实现如下

1. 首先，在config配置文件中添加事件相关的配置属性。

{
	"label": "事件配置",
	"type" : "collapse",
	"default": "open",
	"coms": [
		{
  			"type": "events",
  			"col": "",
  			"label": "",
  			"props": {
    			"eventList": [
      				{
        				"method": "onFocus",
       				 	"name": "获得焦点时",
        				"type": "js"
      				}
    			]
  			}
		}
	]
}

2. 定义一个带有事件监听功能的组件

<a-input 
	ref="aInputRef"
	@focus="focus"
>
</a-input>

3. 获取配置的事件，并注册事件主动触发器

import { useNodeRef } from "pangea-ui/hi-use-node"
import { createEventsHandlers } from "pangea-ui/hi-use-event"

// 传入参数
interface Props{
	node: any;
	loopIndexList?: any[];
}
const props = defineProps<Props>();

// 获取设计器中的代理节点
const nodeRef = useNodeRef(props);

// 获取使用高代码组件时配置的方法
const {onFocus} = createEventsHandlers(()=>nodeRef.value.props.events, {
	keys: ["onFocus"]
})

// 组件ref引用
const aInputRef = ref()

// 事件触发器
const { registerEventTriggers } = useEventTrigger(props)

// 注册事件主动触发器
registerEventTriggers({
	["focus"]: () => {
		aInputRef.value?.inputRef.focus()
	}
})