slibra-module-web/src/components/Layout/TheSubMenu.vue

<script setup lang="jsx">
import { storeToRefs } from 'pinia';
import { NInfiniteScroll } from 'naive-ui';
import { useAppStore } from '@/stores/modules/appStore';
import SvgIcon from '@/components/SvgIcon';

defineProps({
  title: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['scrollToLower']);

const appStore = useAppStore();

const { subMenuCollapse } = storeToRefs(appStore);

const changeCollapse = () => appStore.toggleSubMenuCollapse();

const handleLoadMore = () => emits('scrollToLower');

const scrollToTop = () => {
  document.querySelector('.scroll_container').parentNode.scrollTo({
    top: 0,
    left: 0
  })
};

defineExpose({ scrollToTop });

</script>

<template>
  <div class="sub-menu-container w-[190px] h-full pt-[18px]" v-show="subMenuCollapse" @click="handleLoad">

    <div class="flex items-center justify-between w-full px-[11px] pb-[22px]">
      <p class="text-[#1A2029] text-[14px] font-bold">{{ title }}</p>
      <SvgIcon name="tool-arrow-right" size="20" class="cursor-pointer" @click="changeCollapse"></SvgIcon>
    </div>

    <div class="w-full">
      <slot name="top" />
    </div>

    <div class="sub-menu-main w-full h-full" >
      <NInfiniteScroll passive class="h-full" :distance="10" @load="handleLoadMore" content-class="scroll_container">
        <slot></slot>
        <div class="footer-loading w-full h-[50px]" v-show="loading">
          加载更多
        </div>
      </NInfiniteScroll>
    </div>

  </div>
</template>

<style scoped lang="scss">
.sub-menu-container {
  @include flex(y, start, start);
  border-left: 1px solid #DBE6EE;

  .sub-menu-main {
    position: relative;
    height: calc(100% - 100px);
    width: 100%;
  }

  .footer-loading {
    position: absolute;
    bottom: 0px;
    @include flex(x, center, center);
    background: linear-gradient(180deg, rgba(229, 235, 247, 0.2) 0%, #E5EBF7 15.45%, #E5EBF7 100%);
    font-size: 12px;
    color: #666;
  }
}
</style>