40 lines
933 B
Vue
40 lines
933 B
Vue
<template>
|
||
<div :class="{'collapse':collapse}">
|
||
<!-- 跳转到首页 -->
|
||
<transition name="sidebarLogoFade">
|
||
<!-- 根据collapse控制Logo组件，即是否显示标题 -->
|
||
<router-link v-if="collapse" key="collapse" class="logo" to="/dashboard">
|
||
<!-- <img :src="logoInfo.logo" alt="logo">-->
|
||
</router-link>
|
||
<router-link v-else key="expand" class="logo" to="/dashboard">
|
||
<img :src="getAssetsImageFile('logo/logo.png')"
|
||
alt="logo">
|
||
</router-link>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { defineProps } from 'vue'
|
||
import { getAssetsImageFile } from '@/utils'
|
||
|
||
defineProps({
|
||
collapse: {
|
||
type: Boolean,
|
||
require: true
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 动画样式
|
||
.sidebarLogoFade-enter-active {
|
||
transition: opacity 1.5s;
|
||
}
|
||
|
||
.sidebarLogoFade-enter,
|
||
.sidebarLogoFade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
</style>
|