Element类 Element 对象对应一个组件、子组件或子看板,下面统称为组件。二开代码被绑定在哪个组件上,这个组件的 Element 对象就会赋值给这个类的 elememt 属性。 通过此对象可以操作对应的组件,获取设置项、修改设置项、数据联动、监听事件等。 Element 对象由系统创建并绑定,用户无需构造。
1 2 3 4 5 6 class Button { init ( ) { console .log (this .element .name ); } } export default Button ;
name 获取组件的名称。
getOption() 获取组件的设置项。
1 2 3 4 5 6 getOption (paths : string | string []): any
setOption() 修改组件的设置项。
1 2 3 4 5 6 setOption (paths : string | string [], value : any ): void
applyLinkage() 让组件触发联动。
1 2 3 4 5 applyLinkage (linkage :{name :string ,value :any } | {name :string ,value :any }[]): void
withdrawLinkage() 让组件取消联动。
1 2 3 4 5 withdrawLinkage (names?: string []): void
getFullData() 获取组件的数据。已弃用,建议使用 readData 替代。
1 2 3 4 5 6 7 8 getFullData (paths : string | string [], encode?: "json" | "array" ): any
readData() 读取数据。从 v4.2.0 开始支持。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 readData (paths : string | string [] | string [][], callback : ReadDataCallback , options?: ReadDataOptions ): any [];
readDataAsync() 异步读取数据。从 v4.2.0 开始支持。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 readDataAsync (paths : string | string [] | string [][], options?: ReadDataAsyncOptions ): Promise <any []>
addEventListener() 添加组件的事件监听。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 addEventListener (name : string , callback : Callback ): void ;type Event = { type : string , } type MessageEvent = Event & { origin : string , source : { postMessage : (data: any ) => void , fromSelf : boolean , }, } type Callback = (ev: Event ) => void
data-changed 事件 当数据变化时触发。
1 2 3 4 5 6 let element = ...;element.addEventListener ("data-changed" , (ev: Event )=> { const paths : string | string [] = ev.paths ; });
option-changed 事件 当设置项变化时触发。 注意:为了防止大规模监听带来的性能下降,只有被读取过的字段才会触发回调。
1 2 3 4 5 6 7 let element = ...;const optionValue = this .element .getOption (["XXXXXX" ]);element.addEventListener ("option-changed" , (ev: Event )=> { });
message 事件 收到 postMessage 事件时触发。
1 2 3 4 5 6 7 8 9 let element = ...;element.addEventListener ("message" , (ev: MessageEvent )=> { const { data, origin, source } = ev; source.postMessage ({msg : "test" }); });
click 事件 当对应的组件被鼠标单击时触发。
1 2 3 4 5 let element = ...;element.addEventListener ("click" , (ev: Event )=> { const data = ev.data ; });
mouseenter 事件 当鼠标进入对应的组件时触发。
1 2 3 4 5 let element = ...;element.addEventListener ("mouseenter" , (ev: Event )=> { const data = ev.data ; });
mouseleave 事件 当鼠标离开对应的组件时触发。
1 2 3 4 5 let element = ...;element.addEventListener ("mouseleave" , (ev: Event )=> { const data = ev.data ; });
自定义事件 可以自定义事件名称,然后通过交互来触发,或者通过 emit 方法来触发。 通过如下代码添加自定义事件:
1 2 3 4 5 6 let element = ...;element.addEventListener ("my-test-event" , (ev: Event )=> { const data = ev.data ; });
通过相同的 element 对象,调用 emit 方法来触发自定义事件:
1 2 3 let element = ...;element.emit ("my-test-event" , {test :123 });
也可以通过设置交互来触发:
removeEventListener() 移除组件的事件监听。
1 2 3 4 5 6 removeEventListener (name : string , callback?: Callback ): void
emit() 触发组件上的事件。
1 2 3 4 5 6 emit (name : string , data?: any ): void
isEmpty() 判断 element 是否与组件建立关联。
getMountedInstance() 获取组件暴露的 instance 对象。通过该对象可实现一些高级功能。
1 2 3 4 5 getMountedInstance (): any
以下组件暴露了 instance 对象: ECharts 图表组件暴露了 ECharts 实例对象,参见echarts 文档 。
getExtensionInstances() 获取当前元素的所有扩展的实例列表,从 v4.2.0 开始支持。
1 2 3 4 5 getExtensionInstances (): Array <Object >
getExtensionInstance() 获取当前元素的所有扩展的第一个实例,从 v4.2.0 开始支持
1 2 3 4 5 getExtensionInstance (): Object
getChildren() 获取当前元素的子元素列表,从 v4.2.0 开始支持。
1 2 3 4 5 getChildren (): Array <Element >
getParent() 获取当前元素的子元素列表,从 v4.2.0 开始支持。
1 2 3 4 5 getParent (): Element
clone() 将当前的元素动态复制出来一个,注意该方法是一个异步方法,目前只有鲸孪生中的元素可以使用该方法,从 v4.2.0 开始支持。
1 2 3 4 5 6 clone (name : string ): Promise <Element >
remove() 删除当前元素,注意只有被 clone 出来的元素才可以被删除。非 clone 出来的元素调用该方法将无任何效果,从 v4.2.0 开始支持。