30 lines
748 B
Vue
30 lines
748 B
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
activeTab: 'recent-added' | 'recent-played' | 'libraries'
|
||
|
|
}>()
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
switchTab: [tab: 'recent-added' | 'recent-played' | 'libraries']
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<nav class="root-tabs">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
:class="{ active: activeTab === 'recent-added' }"
|
||
|
|
@click="$emit('switchTab', 'recent-added')"
|
||
|
|
>最近添加</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
:class="{ active: activeTab === 'recent-played' }"
|
||
|
|
@click="$emit('switchTab', 'recent-played')"
|
||
|
|
>最近播放</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
:class="{ active: activeTab === 'libraries' }"
|
||
|
|
@click="$emit('switchTab', 'libraries')"
|
||
|
|
>文件库</button>
|
||
|
|
</nav>
|
||
|
|
</template>
|