比如 动态控制 展示置顶和非置顶
<vue-advanced-chat
:height="height"
:current-user-id="currentUserId"
:loading-rooms="loadingRooms"
:rooms-loaded="roomsLoaded"
:messages-loaded="messagesLoaded"
:load-first-room="loadFirstRoom"
:room-actions.prop="roomActions"
:menu-actions.prop="menuActions"
:message-actions.prop="messageActions"
:show-search="showSearch"
:show-add-room="showAddRoom"
:show-send-icon="showSendIcon"
:show-files="showFiles"
:show-audio="showAudio"
:audio-bit-rate="audioBitRate"
:audio-sample-rate="audioSampleRate"
:show-emojis="showEmojis"
:show-reaction-emojis="showReactionEmojis"
:show-new-messages-divider="showNewMessagesDivider"
:show-footer="showFooter"
:text-messages.prop="textMessages"
:text-formatting.prop="textFormatting"
:responsive-breakpoint="responsiveBreakpoint"
:single-room="singleRoom"
:theme="theme"
:accepted-files="acceptedFiles"
:capture-files="captureFiles"
:multiple-files="multipleFiles"
:link-options.prop="linkOptions"
:styles.prop="styles"
:rooms.prop="roomsForChat"
:messages.prop="messages"
@fetch-more-rooms="loadRooms"
@send-message="sendMessage($event.detail[0])"
@fetch-messages="fetchMessages($event.detail[0])"
@room-action-handler="handleRoomAction($event.detail[0])"
@menu-actions-handler="handleMenuAction($event.detail[0])"
@message-actions-handler="handleMessageAction($event.detail[0])"
>
<script setup lang="ts">
import { computed, ref } from "vue";
import { register } from "vue-advanced-chat";
import type {
ChatMessage,
CustomAction,
MessageAction,
} from "@/types/modules/chat";
import { useGlobalStore } from "@/stores/modules/global";
import { storeToRefs } from "pinia";
import type { GlobalState } from "@/stores/interface";
import { useChatRooms } from "./useChatRooms";
register();
const globalStore = useGlobalStore();
const { theme } = storeToRefs(globalStore);
const height = "calc(100vh - 80px)";
//当前用户身份 可以从登录本地缓存获取
const currentUserId = ref("1234");
//这个房间的历史消息已经到底了,别再向上翻加载了
const messagesLoaded = ref(false);
//可用于移除初始化时打开第一个房间的默认行为
const loadFirstRoom = ref(true);
//可用于在点击房间列表中每个房间的下拉图标时显示您自己的按钮.使用room-action-handler事件在点击按钮后调用您自己的操作
/**
* vue-advanced-chat 的 room-actions 是「功能开关」
* 只要是非空数组,就会启用房间下拉按钮
*/
const roomActions = ref([{ name: "__enable__", title: "" }]);
比如 动态控制 展示置顶和非置顶
<vue-advanced-chat
:height="height"
:current-user-id="currentUserId"
:loading-rooms="loadingRooms"
:rooms-loaded="roomsLoaded"
:messages-loaded="messagesLoaded"
:load-first-room="loadFirstRoom"
:room-actions.prop="roomActions"
:menu-actions.prop="menuActions"
:message-actions.prop="messageActions"
:show-search="showSearch"
:show-add-room="showAddRoom"
:show-send-icon="showSendIcon"
:show-files="showFiles"
:show-audio="showAudio"
:audio-bit-rate="audioBitRate"
:audio-sample-rate="audioSampleRate"
:show-emojis="showEmojis"
:show-reaction-emojis="showReactionEmojis"
:show-new-messages-divider="showNewMessagesDivider"
:show-footer="showFooter"
:text-messages.prop="textMessages"
:text-formatting.prop="textFormatting"
:responsive-breakpoint="responsiveBreakpoint"
:single-room="singleRoom"
:theme="theme"
:accepted-files="acceptedFiles"
:capture-files="captureFiles"
:multiple-files="multipleFiles"
:link-options.prop="linkOptions"
:styles.prop="styles"
:rooms.prop="roomsForChat"
:messages.prop="messages"
@fetch-more-rooms="loadRooms"
@send-message="sendMessage($event.detail[0])"
@fetch-messages="fetchMessages($event.detail[0])"
@room-action-handler="handleRoomAction($event.detail[0])"
@menu-actions-handler="handleMenuAction($event.detail[0])"
@message-actions-handler="handleMessageAction($event.detail[0])"
>