36 lines
988 B
Vue
36 lines
988 B
Vue
<script setup lang="ts">
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { computed } from 'vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const tabs = [
|
|
{ name: 'home', path: '/home', label: '首页', icon: '🏠' },
|
|
{ name: 'material', path: '/material', label: '物资', icon: '📦' },
|
|
{ name: 'inventory', path: '/inventory', label: '出入库', icon: '📥' },
|
|
{ name: 'borrow', path: '/borrow', label: '借用', icon: '🤝' },
|
|
{ name: 'history', path: '/history', label: '记录', icon: '📋' },
|
|
]
|
|
|
|
const active = computed(() => route.path)
|
|
|
|
function go(path: string) {
|
|
if (route.path !== path) router.push(path)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="mobile-tabbar">
|
|
<div
|
|
v-for="t in tabs"
|
|
:key="t.name"
|
|
class="tab-item"
|
|
:class="{ active: active.startsWith(t.path) }"
|
|
@click="go(t.path)"
|
|
>
|
|
<div class="icon">{{ t.icon }}</div>
|
|
<div class="label">{{ t.label }}</div>
|
|
</div>
|
|
</nav>
|
|
</template> |