自定义组件

组件分类

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

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

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

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

registerCustomElement

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

提示

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

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

当前版本仅开放 RCKitOverrideAbleComponent.HQVoiceMessageComponent 供业务层覆盖。

参数说明

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

IRCKitDefineCustomElementOptions 说明

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

代码示例

TypeScript

// 重写语音消息组件
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/>`
});

复用既有组件

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

代码示例

TypeScript

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