| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 03b602 | 2 | <div class="app-logo" @click="handleGoHome"> |
| 2f6253 | 3 | <img :src="logo" /> |
| 03b602 | 4 | <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div> |
| 2f6253 | 5 | </div> |
| 陈 | 6 | </template> |
| 7 | <script lang="ts"> | |
| 8 | import { defineComponent, PropType, ref, watch } from 'vue'; | |
| 9 | // hooks | |
| 10 | import { useSetting } from '/@/hooks/core/useSetting'; | |
| 11 | ||
| 12 | import { PageEnum } from '/@/enums/pageEnum'; | |
| 13 | import logo from '/@/assets/images/logo.png'; | |
| 14 | import { useTimeout } from '/@/hooks/core/useTimeout'; | |
| 15 | import { useGo } from '/@/hooks/web/usePage'; | |
| 16 | ||
| 17 | export default defineComponent({ | |
| 18 | name: 'Logo', | |
| 19 | props: { | |
| 20 | showTitle: { | |
| 21 | type: Boolean as PropType<boolean>, | |
| 22 | default: true, | |
| 23 | }, | |
| 24 | }, | |
| 25 | setup(props) { | |
| 26 | const { globSetting } = useSetting(); | |
| 27 | const go = useGo(); | |
| 28 | function handleGoHome() { | |
| 29 | go(PageEnum.BASE_HOME); | |
| 30 | } | |
| 31 | const showRef = ref<boolean>(!!props.showTitle); | |
| 32 | watch( | |
| 33 | () => props.showTitle, | |
| 34 | (show: boolean) => { | |
| 35 | if (show) { | |
| 36 | useTimeout(() => { | |
| 37 | showRef.value = show; | |
| 38 | }, 280); | |
| 39 | } else { | |
| 40 | showRef.value = show; | |
| 41 | } | |
| 42 | } | |
| 43 | ); | |
| 44 | return { | |
| 45 | handleGoHome, | |
| 46 | globSetting, | |
| 47 | show: showRef, | |
| 48 | logo, | |
| 49 | }; | |
| 50 | }, | |
| 51 | }); | |
| 52 | </script> | |
| 03b602 | 53 | <style lang="less" scoped> |
| N | 54 | @import (reference) '../design/index.less'; |
| 55 | ||
| 56 | .app-logo { | |
| 57 | display: flex; | |
| 58 | justify-content: center; | |
| 59 | align-items: center; | |
| 60 | cursor: pointer; | |
| 61 | ||
| 62 | .logo-title { | |
| 63 | display: none; | |
| 64 | font-family: Georgia, serif; | |
| 65 | font-size: 18px; | |
| 66 | .respond-to(medium,{ | |
| 67 | display: block; | |
| 68 | }); | |
| 69 | } | |
| 70 | } | |
| 71 | </style> | |
