Files
vue3-element-admin/src/layout/components/Sidebar/Logo.vue
haoxr 5beaa84297 refactor: tailwindcss样式优化
Former-commit-id: 3ab444012a3b3f81929830d5c73df8c68437cb87
2022-12-31 22:37:47 +08:00

42 lines
975 B
Vue

<script lang="ts" setup>
import { ref } from 'vue';
import { useSettingsStore } from '@/store/modules/settings';
const settingsStore = useSettingsStore();
defineProps({
collapse: {
type: Boolean,
required: true
}
});
const logo = ref<string>(
new URL(`../../../assets/logo.png`, import.meta.url).href
);
</script>
<template>
<transition class="bg-gray-800">
<router-link
v-if="collapse"
key="collapse"
class="h-[50px] flex items-center justify-center"
to="/"
>
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
<h1 v-else>vue3-element-admin</h1>
</router-link>
<router-link
v-else
key="expand"
class="h-[50px] flex items-center justify-center"
to="/"
>
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
<span class="ml-3 text-white text-sm font-bold">vue3-element-admin</span>
</router-link>
</transition>
</template>