# 自定义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进行展示的效果

自定义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中。整体保证一个单向的数据变更流。