聊天 Plugin

DirectChat 插件用于切换直接聊天小组件中的联系人面板。

用法

该插件通过 data 属性激活。

Data 属性

在 .direct-chat 容器内的按钮上添加 data-lte-toggle="chat-pane" 来切换联系人列表。

<div class="card direct-chat">
  <div class="card-header">
    <h3 class="card-title">聊天</h3>
    <div class="card-tools">
      <button type="button" class="btn btn-tool" data-lte-toggle="chat-pane" title="切换联系人">
        <i class="bi bi-people-fill"></i>
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="direct-chat-messages">
      <!-- 聊天消息在这里 -->
    </div>
    <div class="direct-chat-contacts">
      <!-- 联系人列表在这里 -->
    </div>
  </div>
</div>

事件

事件	描述
expanded.lte.direct-chat	当联系人面板打开时触发。
collapsed.lte.direct-chat	当联系人面板关闭时触发。

CSS 类

类名	描述
direct-chat-contacts-open	当联系人面板可见时，应用于 .direct-chat 容器。

调用方式

import { DirectChat } from "admin-lte"

const chat = document.querySelector(".direct-chat")
const dc = new DirectChat(chat)

dc.toggle()  // 显示或隐藏联系人面板

方法

方法	返回值	描述
toggle()	void	切换 .direct-chat 容器上的 direct-chat-contacts-open 类。触发 expanded.lte.direct-chat 或 collapsed.lte.direct-chat 事件。

该构造函数不接受配置对象——只需传入 .direct-chat 元素即可。