shuimu-dashboard-h5/src/layout/components/Sidebar/Logo.vue

<script lang="ts" setup>
import {useSettingsStore} from "@/store/modules/settings";

const settingsStore = useSettingsStore();

defineProps({
  collapse: {
    type: Boolean,
    required: true,
  },
});

const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
const logoIco = ref(new URL(`../../../assets/logo-icon.png`, import.meta.url).href);
</script>

<template>
  <div class="w-full">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="logo w-full flex items-center justify-center" to="/">
        <img v-if="settingsStore.sidebarLogo" :src="logoIco" class="h-11" />
      </router-link>

      <router-link v-else key="expand" class="logo w-full flex items-center justify-center" to="/">
        <img v-if="settingsStore.sidebarLogo" :src="logo" class="h-11" />
      </router-link>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
  transition: opacity 2s;
}

.sidebarLogoFade-leave-active,
.sidebarLogoFade-enter-from,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

.logo {
  height: 70px;
  line-height: 70px;
}
</style>