import type { ComputedRef, Ref } from 'vue';
|
import { nextTick, onActivated, onUnmounted, ref, watch } from 'vue';
|
import type { ChatMessage } from '../model/types';
|
import emitter from '/@/utils/mitt';
|
|
export type UseScrollToBottomOption = {
|
chatListDom: Ref<HTMLDivElement>;
|
displayMessageList: ComputedRef<ChatMessage[]>;
|
};
|
|
export const useScrollToBottom = (option:UseScrollToBottomOption) => {
|
const {chatListDom,displayMessageList} = option;
|
|
const scrollToBottom = () => {
|
if (!chatListDom.value) return;
|
const parent = chatListDom.value.parentElement;
|
if(!parent)return;
|
if(parent.scrollHeight>parent.clientHeight){
|
parent.scrollTop = parent.scrollHeight - parent.clientHeight;
|
}
|
};
|
|
emitter.on('amis.page.ready',({instance})=>{
|
nextTick(()=>{
|
scrollToBottom();
|
})
|
})
|
const forbidScroll = ref(false);
|
watch(
|
displayMessageList,
|
() => {
|
if (forbidScroll.value) return;
|
nextTick(() => scrollToBottom());
|
},
|
{
|
deep: true,
|
}
|
);
|
onUnmounted(()=>{
|
emitter.off('amis.page.ready');
|
})
|
|
onActivated(() => {
|
if (forbidScroll.value) return;
|
nextTick(() => scrollToBottom());
|
});
|
|
return {
|
forbidScroll
|
};
|
};
|