69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
const router = useRouter()
|
||
|
|
type Entry = {
|
||
|
|
title: string,
|
||
|
|
url: boolean,
|
||
|
|
to: string,
|
||
|
|
}
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'onGo'): void
|
||
|
|
}>();
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
title: string
|
||
|
|
icon: string[]
|
||
|
|
to?: string
|
||
|
|
entry: Entry[]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const onClick = (to: string | undefined, url: boolean) => {
|
||
|
|
if (to === undefined)
|
||
|
|
return
|
||
|
|
|
||
|
|
if (url)
|
||
|
|
window.open(to)
|
||
|
|
emit('onGo')
|
||
|
|
router.push({name: to})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full"
|
||
|
|
@click="onClick(to, false)"
|
||
|
|
>
|
||
|
|
<div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 text-gray-500
|
||
|
|
md:w-auto md:text-white md:group-hover:bg-gray-100 md:group-hover:bg-opacity-30"
|
||
|
|
>
|
||
|
|
<font-awesome-icon :icon="icon" class="mx-2 h-5 w-5 md:h-8 md:w-8"/>
|
||
|
|
<span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap font-bold
|
||
|
|
md:font-normal md:w-0 md:text-xl md:group-hover:w-full"
|
||
|
|
>
|
||
|
|
{{ title }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 下拉菜单 -->
|
||
|
|
<div v-if="entry"
|
||
|
|
class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute
|
||
|
|
md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md
|
||
|
|
md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
|
||
|
|
>
|
||
|
|
<div v-for="item in entry" :key="item.title"
|
||
|
|
class="px-11 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100"
|
||
|
|
@click="onClick(item.to, item.url)"
|
||
|
|
>
|
||
|
|
{{ item.title }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.item {
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
transform: perspective(500px) rotateX(-45deg) translateX(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|