# 自定义Component组件UI
一般情况下,开发者定义的Script Component会使用默认的UI样式,但是也可以使用自己定义的样式来实现。开发者可以用这个功能实现更方便使用的组件交互。
用户可以定义自己的Vue组件来构成对应的UI组件。Project窗口中,在Editor目录下,右键新建 >> Editor Plugin >> ComponentInspector,可以创建一个默认模版。
默认模板有一个.ts文件和一个.vue文件组成,在.ts文件中默认导出class的上面会有一个装饰器:@engine.decorators.CustomComponentInspector,通过这个装饰器给自定义Component组件UI命名进行注册
/**
* customUI.ts
*/
import view from "./customUI_view"
@engine.decorators.CustomComponentInspector("customUI")
export default class customUI extends engine.Editor.UI.ComponentInspector {
public vueObject = view
}
/**
* customUI_view.vue
*/
<template>
<h3>customUI</h3>
</template>
<script>
export default {
name: 'customUI',
// 默认会有这些入参
props: {
sd: {
type: Object,
required: true
}
},
computed: {
viewdata() {
if (this.sd) {
const vd = this.sd.getViewdata()
return vd
} else {
return {}
}
}
}
}
</script>
<style>
</style>
Script Component与自定义UI的关联 用户在自己定义的Script Component上面添加另一个装饰器:@engine.decorators.Inspector,表示在Inspector中的展示使用这个自定义UI。
@engine.decorators.Inspector("customUI")
@engine.decorators.serialize("customUI")
export default class customScriptComp extends engine.Script {...}
下图为对customScriptComp使用自定义Component组件UI进行展示的效果
SerializedData,这个UI组件的入参有一个sd,这是一个serializedData数据。他是一个对小游戏Script Component的处理类,用来生成对应的序列化数据。sd.getViewData()可以获取到工具默认对Script Component里面定义的@property数据的序列化处理,然后开发者可以将数据绑定到自定的vue组件上面。数据与UI是单向绑定的,随着游戏中的component数据不停变更,sd的viewdata数据也会变化,那么界面也会自动同步更新。开发者也可以定义自己的SerializedData,不是用默认的处理逻辑。在任何一个Editor目录下右键新建 >> Editor Plugin >> SerializedData,会创建一个SerializedData类型,然后通过定义update方法,来自定义viewdata是如何生成的。
@engine.decorators.SerializedData('CustomSD')
export class CustomSD {...}
@engine.decorators.Inspector("customUI")
@engine.decorators.UseSerializedData("CustomSD")
@engine.decorators.serialize("customUI")
export default class customScriptComp extends engine.Script {...}
修改数据,如果想要通过UI去修改Script Component中的数据,只要获取SerializedData中的targets属性,就可以拿到对应的Script Component实例,从而直接对其进行修改或是调用。当targets属性变化的时候,SerializedData会识别到,并且更新到viewData中。整体保证一个单向的数据变更流。