vue-vben-admin/src/layouts/logo/index.vue

<template>
  <div class="app-logo anticon" :class="theme" @click="handleGoHome" :style="wrapStyle">
    <img src="/@/assets/images/logo.png" />
    <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, PropType, ref, watch } from 'vue';
  // hooks
  import { useGlobSetting } from '/@/settings/use';
  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  import { useGo } from '/@/hooks/web/usePage';

  import { PageEnum } from '/@/enums/pageEnum';
  import { MenuTypeEnum } from '/@/enums/menuEnum';

  import { menuStore } from '/@/store/modules/menu';
  import { appStore } from '/@/store/modules/app';

  export default defineComponent({
    name: 'Logo',
    props: {
      showTitle: {
        type: Boolean as PropType<boolean>,
        default: true,
      },
      theme: {
        type: String,
      },
    },
    setup(props) {
      const showRef = ref<boolean>(!!props.showTitle);
      const globSetting = useGlobSetting();
      const go = useGo();

      function handleGoHome() {
        go(PageEnum.BASE_HOME);
      }

      watch(
        () => props.showTitle,
        (show: boolean) => {
          if (show) {
            useTimeoutFn(() => {
              showRef.value = show;
            }, 280);
          } else {
            showRef.value = show;
          }
        }
      );

      const wrapStyle = computed(() => {
        const { getCollapsedState } = menuStore;
        const {
          menuSetting: { menuWidth, type },
        } = appStore.getProjectConfig;
        const miniWidth = { minWidth: `${menuWidth}px` };
        if (type !== MenuTypeEnum.SIDEBAR) {
          return miniWidth;
        }
        return getCollapsedState ? {} : miniWidth;
      });

      return {
        handleGoHome,
        globSetting,
        show: showRef,
        wrapStyle,
      };
    },
  });
</script>
<style lang="less" scoped>
  @import (reference) '../../design/index.less';

  .app-logo {
    display: flex;
    align-items: center;
    padding-left: 16px;
    cursor: pointer;
    // justify-content: center;
    &.light {
      border-bottom: 1px solid @border-color-base;
    }

    .logo-title {
      font-size: 18px;
      font-weight: 700;
      opacity: 0;
      transition: all 0.5s;
      .respond-to(medium,{
       opacity: 1;
     });
    }

    // &.dark .logo-title {
    //   font-weight: 400;
    // }

    &.light .logo-title {
      color: @primary-color;
    }
  }
</style>