<template>
|
<div class="flex h-full">
|
<div class="flex flex-col h-full flex-auto relative">
|
<!-- 消息列表区域 -->
|
<div ref="chatListDom" class="relative h-full flex flex-col items-center overflow-y-auto" style="height: calc(100% - 50px)">
|
<span
|
class="more-loading absolute text-blue-400 left-[50%] translate-x-[-50%] cursor-pointer w-10"
|
v-loading="moreIsLoading"
|
/>
|
|
<div class="h-full relative" v-loading="loading" :style="{ width: chatWidth }">
|
<slot name="message-list" />
|
</div>
|
</div>
|
|
<!-- 回到底部按钮 -->
|
<div class="absolute right-28 bottom-40" v-if="!isBottom">
|
<div
|
class="flex items-center justify-center size-[38px] cursor-pointer hover:text-[#0284ff] border rounded-full hover:bg-[#f6f7f9] shadow bg-white"
|
@click="scrollToBottom"
|
>
|
<i class="ywifont ywicon-xiangxiajiantou !text-[20px]" />
|
</div>
|
</div>
|
|
<!-- 输入区域 -->
|
<div class="sticky bottom-0 w-full px-6 pt-12 pb-6 bg-[rgb(247,248,250)] flex justify-center" v-if="!isSharePage">
|
<slot name="input-area" />
|
</div>
|
</div>
|
|
<slot name="drawer" />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
import { useScroll } from '../hooks/useScroll';
|
|
const props = defineProps<{
|
loading?: boolean;
|
moreIsLoading?: boolean;
|
isSharePage?: boolean;
|
chatWidth?: string;
|
}>();
|
|
const chatListDom = ref<HTMLDivElement>();
|
|
const { scrollToBottom, isBottom } = useScroll({
|
chatListDom,
|
});
|
|
defineExpose({
|
chatListDom,
|
scrollToBottom,
|
});
|
</script>
|
|
<style scoped>
|
.more-loading :deep(.el-loading-spinner) {
|
--loading-size: 35px;
|
margin-top: 0;
|
.circular {
|
width: var(--loading-size);
|
height: var(--loading-size);
|
}
|
}
|
</style>
|
