Bottom Menu - 底部菜单

Demo

更新日期

2026-09-25 UTC

bottom-menu/demo.vue

<script lang="ts" setup>
import type { BottomMenuItem } from './index'
import { ref } from 'vue'

const items: BottomMenuItem[] = [
  {
    icon: 'i-ri-home-line',
    activeIcon: 'i-ri-home-fill',
    title: '首页',
    to: '/',
  },
  {
    icon: 'i-ri-compass-2-line',
    activeIcon: 'i-ri-compass-2-fill',
    title: '发现',
    to: '/discover',
  },
  {
    icon: 'i-ri-copper-coin-line',
    activeIcon: 'i-ri-copper-coin-fill',
    title: '云币',
    to: '/coin',
  },
  {
    icon: 'i-ri-user-line',
    activeIcon: 'i-ri-user-fill',
    title: '我的',
    to: '/user',
  },
]

// when using vue-router
// import { useRoute, useRouter } from 'vue-router'
// const route = useRoute()
// const router = useRouter()
// const active = computed(() => route.path)

const active = ref('/')
function onClick(item: BottomMenuItem) {
  // router.push(item.to || '/')
  active.value = item.to || ''
}
</script>

<template>
  <div class="mx-auto max-w-xs overflow-hidden border border-$ylf-c-border rounded-ylf-xl">
    <div class="h-28 op-90 bg-brand-gradient" />
    <YlfBottomMenu shadow>
      <YlfBottomMenuItem
        v-for="item in items"
        :key="item.to"
        :item="item"
        :active="active === item.to"
        @click="onClick"
      />
    </YlfBottomMenu>
  </div>
</template>

云玻璃底部导航：背景模糊通透，激活项使用晴空蓝主色。适合 H5 / 子应用的主导航。

YlfBottomMenu Props

属性	说明	类型	默认值
shadow	浮起阴影	boolean	false

YlfBottomMenuItem Props

属性	说明	类型
item	菜单项数据	BottomMenuItem
active	是否激活	boolean

BottomMenuItem

字段	说明	类型
title	标题	string
icon	图标 class	string
activeIcon	激活态图标 class	string?
to	路由目标	string?
onClick	点击回调	(...args: any[]) => void