Tu View PlusMenu 菜单
提供导航功能的菜单。
顶部菜单
设置 mode 为 horizontal 时，使用水平菜单。
...
导航一
导航二
导航三
导航四
<template>
<tu-menu mode="horizontal" :default-selected-keys="['1']">
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</template><template>
<tu-menu mode="horizontal" :default-selected-keys="['1']">
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</template>侧边菜单
侧边菜单。
导航一
导航二
导航三
选项一
选项二
导航四
<template>
<tu-menu
style="width: 200px; border-radius: 4px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</template><template>
<tu-menu
style="width: 200px; border-radius: 4px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</template>主题
Menu 组件提供不同主题：outset、inset、bordered、outlined 和 flat。通过设置 effect 属性来改变主题，默认为 outset
导航一
导航二
导航三
选项一
选项二
导航四
...
导航一
导航二
导航三
导航四
<template>
<tu-radio-group class="mb-2" v-model="effect" type="button">
<tu-radio label="default">默认</tu-radio>
<tu-radio label="flat">扁平</tu-radio>
<tu-radio label="outset">上方阴影</tu-radio>
<tu-radio label="inset">下方阴影</tu-radio>
<tu-radio label="bordered">边框</tu-radio>
<tu-radio label="outlined">外轮廓</tu-radio>
</tu-radio-group>
<tu-menu
class="mb-2"
style="width: 200px; border-radius: 4px"
:effect="effect"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
<tu-menu mode="horizontal" :effect="effect" :default-selected-keys="['1']">
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const effect = ref('outset');
</script><template>
<tu-radio-group class="mb-2" v-model="effect" type="button">
<tu-radio label="default">默认</tu-radio>
<tu-radio label="flat">扁平</tu-radio>
<tu-radio label="outset">上方阴影</tu-radio>
<tu-radio label="inset">下方阴影</tu-radio>
<tu-radio label="bordered">边框</tu-radio>
<tu-radio label="outlined">外轮廓</tu-radio>
</tu-radio-group>
<tu-menu
class="mb-2"
style="width: 200px; border-radius: 4px"
:effect="effect"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
<tu-menu mode="horizontal" :effect="effect" :default-selected-keys="['1']">
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const effect = ref('outset');
</script>可折叠菜单
通过 collapsed 来指定菜单收起。
导航一
导航二
导航三
选项一
选项二
导航四
<template>
<tu-button class="mb-2" @click="collapsed = !collapsed">
<template #icon>
<Fold v-if="collapsed" />
<Expand v-else />
</template>
</tu-button>
<tu-menu style="width: 200px" :default-selected-keys="['1']" :collapsed="collapsed">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Fold, Expand, Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
const collapsed = ref(false);
</script><template>
<tu-button class="mb-2" @click="collapsed = !collapsed">
<template #icon>
<Fold v-if="collapsed" />
<Expand v-else />
</template>
</tu-button>
<tu-menu style="width: 200px" :default-selected-keys="['1']" :collapsed="collapsed">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Fold, Expand, Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
const collapsed = ref(false);
</script>响应式收缩
设置 breakpoint 可触发响应式收缩。
导航一
导航二
导航三
选项一
选项二
导航四
<template>
<tu-menu style="width: 200px" breakpoint="xl" :default-selected-keys="['1']">
<tu-menu-item key="1">
<template #icon>
<tu-icon> <Menu /> </tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon> <Tools /> </tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon> <UploadFilled /> </tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon> <Promotion /> </tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu style="width: 200px" breakpoint="xl" :default-selected-keys="['1']">
<tu-menu-item key="1">
<template #icon>
<tu-icon> <Menu /> </tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon> <Tools /> </tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon> <UploadFilled /> </tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon> <Promotion /> </tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>子菜单
菜单内可以嵌入多个子项，通过 openKeys 可以设置默认打开的子项。
导航一
导航二
导航三
选项一
选项二
导航四
<template>
<tu-menu style="width: 200px; height: 300px" :default-selected-keys="['1']" show-collapse-button>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu style="width: 200px; height: 300px" :default-selected-keys="['1']" show-collapse-button>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>菜单分组
多个子项，使用 tu-menu-group 标签进行分组。
导航一
导航二
导航三
分组一
选项一
选项二
分组二
选项三
选项四
导航四
<template>
<tu-menu
style="width: 200px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item-group title="分组一">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-menu-item-group>
<tu-menu-item-group title="分组二">
<tu-menu-item key="3-3">选项三</tu-menu-item>
<tu-menu-item key="3-4">选项四</tu-menu-item>
</tu-menu-item-group>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu
style="width: 200px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item-group title="分组一">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-menu-item-group>
<tu-menu-item-group title="分组二">
<tu-menu-item key="3-3">选项三</tu-menu-item>
<tu-menu-item key="3-4">选项四</tu-menu-item>
</tu-menu-item-group>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>悬浮菜单
指定 mode 为 pop 可以使用悬浮菜单。
导航一
导航二
导航三
导航四
<template>
<tu-menu style="width: 200px" mode="pop">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu style="width: 200px" mode="pop">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>悬浮按钮菜单
指定 mode 为 popButton 使用按钮组样式的悬浮菜单。
<template>
<div class="menu-demo">
<tu-trigger
:trigger="['click', 'hover']"
:popupOffset="20"
clickClose
position="top"
v-model:popupVisible="visible"
>
<tu-button class="menu-trigger-demo">菜单</tu-button>
<template #content>
<tu-menu style="width: 200px" mode="popButton" showCollapseButton>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
</tu-menu>
</template>
</tu-trigger>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Menu, Tools } from '@tu-view-plus/icons-vue';
const visible = ref(false);
</script>
<style lang="scss" scoped>
.menu-demo {
position: relative;
box-sizing: border-box;
width: 660px;
height: 180px;
padding: 40px;
}
.menu-trigger-demo{
position: absolute;
bottom: 20px;
}
</style><template>
<div class="menu-demo">
<tu-trigger
:trigger="['click', 'hover']"
:popupOffset="20"
clickClose
position="top"
v-model:popupVisible="visible"
>
<tu-button class="menu-trigger-demo">菜单</tu-button>
<template #content>
<tu-menu style="width: 200px" mode="popButton" showCollapseButton>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
</tu-menu>
</template>
</tu-trigger>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Menu, Tools } from '@tu-view-plus/icons-vue';
const visible = ref(false);
</script>
<style lang="scss" scoped>
.menu-demo {
position: relative;
box-sizing: border-box;
width: 660px;
height: 180px;
padding: 40px;
}
.menu-trigger-demo{
position: absolute;
bottom: 20px;
}
</style>Menu API
Menu Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| theme | 菜单的主题 | String | light |
| mode | 菜单的模式 | String | vertical |
| level-indent | 层级之间的缩进量 | Number | - |
| auto-open | 默认展开所有多级菜单 | Boolean | false |
| collapsed | 是否折叠菜单 | Boolean | - |
| default-collapsed | 默认是否折叠菜单 | Boolean | false |
| collapsed-width | 折叠菜单宽度 | Number | - |
| accordion | 开启手风琴效果 | Boolean | false |
| auto-scroll-into-view | 是否自动滚动选中项目到可见区域 | Boolean | false |
| show-collapse-button | 是否内置折叠按钮 | Boolean | false |
| selected-keys | 选中的菜单项 key 数组 | Array | - |
| default-selected-keys | 默认选中的菜单项 key 数组 | Array | [] |
| open-keys | 展开的子菜单 key 数组 | Array | - |
| default-open-keys | 默认展开的子菜单 key 数组 | Array | [] |
| scroll-config | 滚动到可见区域的配置项 | Object | - |
| trigger-props | 弹出模式下可接受所有 Trigger 的 Props | Object | - |
| tooltip-props | 弹出模式下可接受所有 ToolTip 的 Props | Object | - |
| auto-open-selected | 默认展开选中的菜单 | Boolean | false |
| breakpoint | 响应式的断点 | String | - |
| popup-max-height | 弹出框的最大高度 | BooleanNumber | true |
Menu Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| collapse | 折叠状态改变时触发 | Function |
| menu-item-click | 点击菜单项时触发 | Function |
| sub-menu-click | 点击子菜单时触发 | Function |
Menu Slots
| 参数名 | 描述 |
|---|---|
| collapse-icon | 折叠图标 |
| expand-icon-right | 向右展开的图标 |
| expand-icon-down | 向下展开的图标 |
Sub-Menu Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| key | 唯一标志 | String | - |
| title | 子菜单的标题 | String | - |
| selectable | 弹出模式下，是否将多级菜单头也作为一个菜单项，支持点击选中等状态 | Boolean | false |
| popup | 是否强制使用弹出模式，level表示当前子菜单的层级 | BooleanFunction | false |
| popup-max-height | 弹出框的最大高度 | BooleanNumber | true |
Sub-Menu Slots
| 参数名 | 描述 |
|---|---|
| title | 标题 |
| expand-icon-right | 向右展开的图标 |
| expand-icon-down | 向下展开的图标 |
| icon | 菜单的图标 |
Menu-Item-Group Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 菜单组的标题 | String | - |
Menu-Item-Group Slots
| 参数名 | 描述 |
|---|---|
| title | 标题 |
Menu-Item Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| key | 唯一标志 | String | - |
| disabled | 是否禁用 | Boolean | false |
Menu-Item Slots
| 参数名 | 描述 |
|---|---|
| icon | 菜单的图标 |