mirror of
https://github.com/koel/koel
synced 2024-12-30 06:23:05 +00:00
24 lines
530 B
Vue
24 lines
530 B
Vue
|
<template>
|
||
|
|
<li>
|
||
|
|
<a :class="active && 'active'" :href="props.href">
|
||
|
|
<icon :icon="props.icon" fixed-width />
|
||
|
|
<span>
|
||
|
|
<slot />
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { Component, ref } from 'vue'
|
||
|
|
import { useRouter } from '@/composables'
|
||
|
|
|
||
|
|
const props = defineProps<{ href: string; icon: Component, screen: ScreenName }>()
|
||
|
|
|
||
|
|
const active = ref(false)
|
||
|
|
|
||
|
|
const { onRouteChanged } = useRouter()
|
||
|
|
|
||
|
|
onRouteChanged(route => active.value = route.screen === props.screen)
|
||
|
|
</script>
|