51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { defineAsyncComponent, shallowRef } from 'vue'
|
|
import { SearchInput } from '@/components/Im/SearchInput'
|
|
import ConversationList from '../Conversation/components/ConversationList.vue'
|
|
import { Welcome } from '@/components/Im/Welcome'
|
|
|
|
const MessageComponent = defineAsyncComponent(() => import('@/views/im/Message/index.vue'))
|
|
|
|
const currentComponent = shallowRef(Welcome) // 默认加载欢迎页组件
|
|
|
|
const toChatMessage = (id) => {
|
|
console.log('>>>>>>>id', id)
|
|
currentComponent.value = MessageComponent // 加载消息组件
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-container style="height: 100%">
|
|
<el-aside class="chat_conversation_box">
|
|
<!-- 搜索组件 -->
|
|
<SearchInput :searchType="'conversation'" />
|
|
<div class="chat_conversation_list">
|
|
<ConversationList @to-chat-message="toChatMessage" />
|
|
</div>
|
|
</el-aside>
|
|
<el-main class="chat_conversation_main_box">
|
|
<component :is="currentComponent" />
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat_conversation_box {
|
|
position: relative;
|
|
background: #cfdbf171;
|
|
overflow: hidden;
|
|
min-width: 324px;
|
|
|
|
.chat_conversation_list {
|
|
height: calc(100% - 60px);
|
|
}
|
|
}
|
|
|
|
.chat_conversation_main_box {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
</style>
|