跳到主要内容

自定义组件

组件分类​

为了保证 Glabal IM UIKit 的稳定性与可维护性的，同时提供足够的灵活性、可拓展性来满足开发者的定制化需求，Global IM UIKit 中将所有内部组件设计为两类：Provider 组件与 Component 组件。

Component 组件为无状态组件，仅负责 UI 渲染，不负责数据管理。此类组件通过接收 props 外部输入以驱动 UI 渲染更新，但无法修改 props 数据本身。

Provider 组件为业务容器组件，其内部包含了响应式数据管理、交互事件分发等复杂业务逻辑。此类组件对于开发者来说是黑盒的，其标签命名以 -provider 结尾。

Global IM UIKit 允许开发者对部分 Component 组件进行覆盖替换，以满足开发者的深度定制化需求。

registerCustomElement​

Global IM UIKit 提供了 registerCustomElement 接口用于注册自定义组件，您可以通过该接口对 Global IM UIKit 内部组件进行覆盖替换，以满足开发者的深度定制化需求。

提示
  • 该接口仅限 ready 调用前有效。
  • 由于自定义组件注册相对复杂，建议使用 Typescript 进行业务开发，以获取更好的 IDE 语法提示支持和类型推导。
  • Global IM UIKit 内部使用 Vue 作为 DOM 组件渲染引擎，因此，在使用接口定义自定义组件时，组件模版语法与 Vue 保持一致。

为了保障 Global IM UIKit 迭代升级过程中向前兼容，Global IM UIKit 暂时仅允许对部分组件进行重写。

参数说明

参数类型是否必传说明
tagRCKitOverrideAbleComponent是需要重写的组件标识，为 RCKitOverrideAbleComponent 枚举值。
options[IRCKitDefineCustomElementOptions<T>]是组件配置。

IRCKitDefineCustomElementOptions 说明

属性类型是否必传说明
templatestring是组件模版，模版语法使用 Vue 组件模版语法
setup(props: T, ctx: [IRCKitCustomElementContext]) => any是组件逻辑处理函数
stylesstring[]否组件样式表

代码示例

// 重写语音消息组件
kitApp.registerCustomElement(RCKitOverrideAbleComponent.HQVoiceMessageComponent, {
  setup(props, ctx) {
    const value = props.value;
    return { value }
  },
  template: `<button @click="value.toggle()">{{ value.playing ? '暂停' : '播放' }}</button><br/>
    playing: {{ value.playing }}<br/>
    progress: {{ value.progress }} / 100<br/>
    duration: {{ value.duration }}s<br/>`
});

复用既有组件​

Global IM UIKit 允许开发者在 template 模版中通过 <rc-origin> 标签占位符来复用被复写的组件。

代码示例

// 重写语音消息组件
kitApp.registerCustomElement(RCKitOverrideAbleComponent.HQVoiceMessageComponent, {
  setup(props, ctx) {
    const value = props.value;
    const onClick = () => {
      cossole.log('点击了自定义测试按钮');
    };
    return { value, onClick }
  },
  // template 中通过 <rc-origin> 标签占位符来复用被复写的组件，需要注意 value 属性值的传递
  template: `
    <rc-origin :value="value"></rc-origin>
    <br/>
    <button @click="onClick">测试</button><br/>
  `
});
最后于 更新