120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
:ref="convHeaderRef"
|
|
class="tui-conversation-header"
|
|
>
|
|
<Navigation title="测试首页标题">
|
|
<template
|
|
#right
|
|
>
|
|
<div v-show="!isGlobalSearching" class="menu-container">
|
|
<ul
|
|
v-if="menuList.length > 0"
|
|
class="list"
|
|
>
|
|
<li
|
|
v-for="(item, index) in menuList"
|
|
:key="index"
|
|
class="list-item"
|
|
>
|
|
<main
|
|
class="list-item-item"
|
|
@click.stop="handleMenu(item)"
|
|
>
|
|
<Icon
|
|
v-if="item.icon"
|
|
class="list-item-icon"
|
|
:file="item.icon"
|
|
/>
|
|
</main>
|
|
</li>
|
|
</ul>
|
|
<ul
|
|
v-if="showChildren.length > 0"
|
|
class="menu-container-children list"
|
|
>
|
|
<li
|
|
v-for="(childrenItem, childrenIndex) in showChildren"
|
|
:key="childrenIndex"
|
|
class="list-item"
|
|
@click="handleMenu(childrenItem)"
|
|
>
|
|
<Icon
|
|
v-if="childrenItem.icon"
|
|
class="list-item-icon"
|
|
:file="childrenItem.icon"
|
|
/>
|
|
<h1 class="list-item-title">
|
|
{{ childrenItem.text }}
|
|
</h1>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</Navigation>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { StoreName, TUIStore } from '@tencentcloud/chat-uikit-engine-lite';
|
|
import { computed, ref, onMounted, onUnmounted } from '../../../adapter-vue';
|
|
import Icon from '../../common/Icon.vue';
|
|
import Navigation from '../../common/Navigation/index.vue';
|
|
import Server, { IMenuItem } from './server';
|
|
import type { ISearchingStatus } from '../../TUISearch/type';
|
|
|
|
const showChildren = ref<IMenuItem[]>([]);
|
|
const convHeaderRef = ref<HTMLElement | undefined>();
|
|
const isGlobalSearching = ref(false);
|
|
|
|
const menuList = computed(() => {
|
|
return Server.getInstance().getMenu();
|
|
});
|
|
|
|
const onCurrentSearchingStatusChange = (data: ISearchingStatus) => {
|
|
isGlobalSearching.value = data.searchType === 'global' && data.isSearching;
|
|
if (isGlobalSearching.value) {
|
|
closeChildren();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
showChildren.value = [];
|
|
TUIStore.watch(StoreName.SEARCH, {
|
|
currentSearchingStatus: onCurrentSearchingStatusChange,
|
|
});
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
TUIStore.unwatch(StoreName.SEARCH, {
|
|
currentSearchingStatus: onCurrentSearchingStatusChange,
|
|
});
|
|
});
|
|
|
|
const handleMenu = (item: IMenuItem) => {
|
|
const { data: { children }, listener = { onClicked: () => {} } } = item;
|
|
if (children) {
|
|
showChildren.value = showChildren.value.length > 0 ? [] : children;
|
|
} else {
|
|
listener.onClicked(item);
|
|
closeChildren();
|
|
}
|
|
};
|
|
|
|
const closeChildren = () => {
|
|
showChildren.value = [];
|
|
};
|
|
|
|
defineExpose({
|
|
closeChildren,
|
|
});
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.menu-container {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped src="../style/index.scss"></style>
|