# 导航菜单
# 顶部导航
<template>
<div class="demo-block-column">
<div class="demo-block-row">
<t-head-menu theme="dark" v-model="menu1Value" @change="changeHandler">
<template #logo>
<img width="184" src="https://www.tencent.com/img/index/menu_logo.png" alt="logo">
</template>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu theme="dark" v-model="menu1Value" @change="changeHandler">
<template #logo>
<img width="184" src="https://www.tencent.com/img/index/menu_logo.png" alt="logo">
</template>
<t-menu-item value="item1">菜单1</t-menu-item>
<t-menu-item value="item2">菜单2</t-menu-item>
<t-menu-item value="item4" :disabled="true">禁用菜单</t-menu-item>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu theme="dark" v-model="menu1Value" @change="changeHandler">
<template #logo>
<img width="184" src="https://www.tencent.com/img/index/menu_logo.png" alt="logo">
</template>
<div class="care-menu__item-txt">数据标准</div>
<template #operations>
<a href="javascript:;"><i class="care-icon-search"></i></a>
<a href="javascript:;"><i class="care-icon-setting"></i></a>
<div class="care-menu__ft-txt">李医生，您好</div>
</template>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu defaultValue="2-1" expandType="popup" theme="dark" v-model="menu1Value" @change="changeHandler">
<template #logo>
<img width="184" src="https://www.tencent.com/img/index/menu_logo.png" alt="logo">
</template>
<div class="care-menu__item-txt">工作台</div>
<t-submenu value="1">
<template #title>
<span>菜单1</span>
</template>
<t-menu-item value="1-1">子菜单1-1</t-menu-item>
<t-menu-item value="1-2">子菜单1-2</t-menu-item>
<t-menu-item value="1-3">子菜单1-3</t-menu-item>
</t-submenu>
<t-submenu value="2">
<template #title>
<span>菜单2</span>
</template>
<t-menu-item value="2-1">子菜单1-1</t-menu-item>
<t-menu-item value="2-2">子菜单1-2</t-menu-item>
<t-menu-item value="2-3">子菜单1-3</t-menu-item>
</t-submenu>
<div class="care-menu__divide"></div>
<t-menu-item value="item1">一级导航</t-menu-item>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu theme="dark" v-model="menu1Value" @change="changeHandler" class="care-menu">
<div class="care-menu__hd">
<i class="care-icon-arrow-right-small"></i>
<div class="care-menu__hd-txt">公立医院三级考核BI</div>
<t-tag shape="round">标签一</t-tag>
</div>
<div class="care-menu__bd">
<t-menu-item value="item1">菜单1</t-menu-item>
<t-menu-item value="item2">菜单2</t-menu-item>
</div>
<template #operations>
<div class="care-menu__item-txt">功能入口</div>
<div class="care-menu__item-txt">功能入口</div>
<div class="care-menu__ft-txt">李医生，您好</div>
</template>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu theme="dark" v-model="menu1Value" @change="changeHandler">
<div class="care-menu__hd">
<i class="care-icon-arrow-right-small"></i>
<div class="care-menu__hd-txt">公立医院三级考核BI</div>
<t-tag shape="round">标签一</t-tag>
</div>
<div class="care-menu__bd">
<t-menu-item value="item1">菜单1</t-menu-item>
<t-menu-item value="item2">菜单2</t-menu-item>
</div>
<template #operations>
<div class="care-menu__item-txt">保存</div>
<t-button theme="primary" variant="base">填充按钮</t-button>
</template>
</t-head-menu>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menu1Value: 'item2',
menu2Value: 'item1',
};
},
methods: {
changeHandler(active) {
console.log('change', active);
},
},
};
</script>
显示代码 复制代码 复制代码
<template>
<div class="demo-block-column">
<div class="demo-block-row">
<t-head-menu theme="light" v-model="menu1Value" @change="changeHandler">
<template #logo>
<img width="184" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<t-menu-item value="item1">菜单1</t-menu-item>
<t-menu-item value="item2">菜单2</t-menu-item>
<t-menu-item value="item4" :disabled="true">禁用菜单</t-menu-item>
<template #operations>
</template>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu theme="light" v-model="menu1Value" @change="changeHandler">
<template #logo>
<img width="184" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<div>数据标准</div>
<template #operations>
<a href="javascript:;"><i class="care-icon-search"></i></a>
<a href="javascript:;"><i class="care-icon-setting"></i></a>
<div class="care-menu__ft-txt">李医生，您好</div>
</template>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu defaultValue="2-1" expandType="popup" theme="light" v-model="menu1Value" @change="changeHandler">
<template #logo>
<img width="184" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<div class="care-menu__item-txt">工作台</div>
<t-submenu value="1">
<template #title>
<span>菜单1</span>
</template>
<t-menu-item value="1-1">子菜单1-1</t-menu-item>
<t-menu-item value="1-2">子菜单1-2</t-menu-item>
<t-menu-item value="1-3">子菜单1-3</t-menu-item>
</t-submenu>
<t-submenu value="2">
<template #title>
<span>菜单2</span>
</template>
<t-menu-item value="2-1">子菜单1-1</t-menu-item>
<t-menu-item value="2-2">子菜单1-2</t-menu-item>
<t-menu-item value="2-3">子菜单1-3</t-menu-item>
</t-submenu>
<div class="care-menu-divide"></div>
<t-menu-item value="item1">一级导航</t-menu-item>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu theme="light" v-model="menu1Value" @change="changeHandler">
<div class="care-menu__hd">
<i class="care-icon-arrow-right-small"></i>
<div class="care-menu__hd-txt">公立医院三级考核BI</div>
<t-tag shape="round">标签一</t-tag>
</div>
<div class="care-menu__bd">
<t-menu-item value="item1">菜单1</t-menu-item>
<t-menu-item value="item2">菜单2</t-menu-item>
</div>
<template #operations>
<div class="care-menu__item-txt">功能入口</div>
<div class="care-menu__item-txt">功能入口</div>
<div class="care-menu__ft-txt">李医生，您好</div>
</template>
</t-head-menu>
</div>
<div class="demo-block-row">
<t-head-menu theme="light" v-model="menu1Value" @change="changeHandler">
<div class="care-menu__hd">
<i class="care-icon-arrow-right-small"></i>
<div class="care-menu__hd-txt">公立医院三级考核BI</div>
<t-tag shape="round">标签一</t-tag>
</div>
<div class="care-menu__bd">
<t-menu-item value="item1">菜单1</t-menu-item>
<t-menu-item value="item2">菜单2</t-menu-item>
</div>
<template #operations>
<div class="care-menu__item-txt">保存</div>
<t-button theme="primary" variant="base">填充按钮</t-button>
</template>
</t-head-menu>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menu1Value: 'item2',
menu2Value: 'item1',
};
},
methods: {
changeHandler(active) {
console.log('change', active);
},
},
};
</script>
显示代码 复制代码 复制代码
# 侧边导航
- 仪表盘
- 资源列表
- 根目录
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 精准监控
- 消息区
分组类型1
分组类型2
- 仪表盘
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区
分组类型1
分组类型2
仪表盘
- 仪表盘
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区
文件
分组类型2
仪表盘
- 仪表盘 标签一
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区 标签一
分组类型2
<template>
<div class="demo-block-column">
<div class="demo-block-row" style="height:450px">
<t-menu theme="light" defaultValue="dashboard" style="margin-right: 20px">
<template #logo>
<img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item value="resource">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
资源列表
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-menu-item value="root">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
根目录
</t-menu-item>
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="precise-monitor">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
精准监控
</t-menu-item>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
</t-menu>
<t-menu theme="light" defaultValue="dashboard" style="margin-right: 20px">
<template #logo>
<img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
<template #operations>
<t-menu-item class="care-menu__item">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<div class="care-menu__item-bd">仪表盘</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</t-menu-item>
</template>
</t-menu>
<t-menu theme="light" defaultValue="dashboard" style="margin-right: 20px">
<div class="care-default-menu__hd">
<div class="care-menu__item">
<div class="care-menu__item-bd">文件</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</div>
</div>
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
<template #operations>
<t-menu-item>
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item>
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item class="care-menu__item">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<div class="care-menu__item-bd">仪表盘</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</t-menu-item>
</template>
</t-menu>
<t-menu theme="light" defaultValue="dashboard" style="margin-right: 20px">
<div class="care-default-menu__hd">
<t-input />
</div>
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
<t-tag shape="round">标签一</t-tag>
</t-menu-item>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
<t-tag shape="round" theme="danger">标签一</t-tag>
</t-menu-item>
</t-menu-group>
</t-menu>
</div>
</div>
</template>
显示代码 复制代码 复制代码
# 侧边导航
- 仪表盘
- 资源列表
- 根目录
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 精准监控
- 消息区
分组类型1
分组类型2
- 仪表盘
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区
分组类型1
分组类型2
仪表盘
- 仪表盘
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区
文件
分组类型2
仪表盘
- 仪表盘 标签一
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区 标签一
分组类型2
<template>
<div class="demo-block-column">
<div class="demo-block-row" style="height:450px">
<t-menu theme="dark" defaultValue="dashboard" style="margin-right: 20px">
<template #logo>
<img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item value="resource">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
资源列表
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-menu-item value="root">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
根目录
</t-menu-item>
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="precise-monitor">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
精准监控
</t-menu-item>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
</t-menu>
<t-menu theme="dark" defaultValue="dashboard" style="margin-right: 20px">
<template #logo>
<img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
<template #operations>
<t-menu-item class="care-menu__item">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<div class="care-menu__item-bd">仪表盘</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</t-menu-item>
</template>
</t-menu>
<t-menu theme="dark" defaultValue="dashboard" style="margin-right: 20px">
<div class="care-default-menu__hd">
<div class="care-menu__item">
<div class="care-menu__item-bd">文件</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</div>
</div>
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
<template #operations>
<t-menu-item>
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item>
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item class="care-menu__item">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<div class="care-menu__item-bd">仪表盘</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</t-menu-item>
</template>
</t-menu>
<t-menu theme="dark" defaultValue="dashboard" style="margin-right: 20px">
<div class="care-default-menu__hd">
<t-input />
</div>
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
<t-tag shape="round">标签一</t-tag>
</t-menu-item>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
<t-tag shape="round" theme="danger">标签一</t-tag>
</t-menu-item>
</t-menu-group>
</t-menu>
</div>
</div>
</template>
显示代码 复制代码 复制代码
# 侧边导航
- 仪表盘
- 资源列表
- 根目录
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 精准监控
- 消息区
分组类型1
分组类型2
- 仪表盘
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区
分组类型1
分组类型2
仪表盘
- 仪表盘
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区
文件
分组类型2
仪表盘
- 仪表盘 标签一
- 调度平台
- 二级菜单内容
- 二级菜单内容
- 二级菜单内容
- 消息区 标签一
分组类型2
<template>
<div class="demo-block-column">
<div class="demo-block-row" style="height:450px">
<t-menu class="care-menu--black" defaultValue="dashboard" style="margin-right: 20px">
<template #logo>
<img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item value="resource">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
资源列表
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-menu-item value="root">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
根目录
</t-menu-item>
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="precise-monitor">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
精准监控
</t-menu-item>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
</t-menu>
<t-menu class="care-menu--black" defaultValue="dashboard" style="margin-right: 20px">
<template #logo>
<img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
<template #operations>
<t-menu-item class="care-menu__item">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<div class="care-menu__item-bd">仪表盘</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</t-menu-item>
</template>
</t-menu>
<t-menu class="care-menu--black" defaultValue="dashboard" style="margin-right: 20px">
<div class="care-default-menu__hd">
<div class="care-menu__item">
<div class="care-menu__item-bd">文件</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</div>
</div>
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
</t-menu-item>
</t-menu-group>
<template #operations>
<t-menu-item>
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item>
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
</t-menu-item>
<t-menu-item class="care-menu__item">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<div class="care-menu__item-bd">仪表盘</div>
<div class="care-menu__item-ft">
<i class="care-icon-folder-close size-l"></i>
</div>
</t-menu-item>
</template>
</t-menu>
<t-menu class="care-menu--black" defaultValue="dashboard" style="margin-right: 20px">
<div class="care-default-menu__hd">
<t-input />
</div>
<t-menu-item value="dashboard">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
仪表盘
<t-tag shape="round">标签一</t-tag>
</t-menu-item>
<t-menu-group title="分组类型2">
<t-submenu title="调度平台" value="2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
<t-menu-item value="2-1">二级菜单内容</t-menu-item>
<t-menu-item value="2-2">二级菜单内容</t-menu-item>
<t-menu-item value="2-3">二级菜单内容</t-menu-item>
</t-submenu>
<t-menu-item value="mail">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
消息区
<t-tag shape="round" theme="danger">标签一</t-tag>
</t-menu-item>
</t-menu-group>
</t-menu>
</div>
</div>
</template>
显示代码 复制代码 复制代码
# 侧边导航
- 菜单内容
- 菜单内容
- 菜单内容
- 菜单内容
分组类型1
分组类型2
分组类型3
- 菜单内容
- 菜单内容
- 菜单内容
- 菜单内容
分组类型1
分组类型2
分组类型3
- 菜单内容
- 菜单内容
- 菜单内容
- 菜单内容
分组类型1
分组类型2
分组类型3
<template>
<div class="demo-block-column">
<div class="demo-block-row">
<t-menu theme="light" defaultValue="item1" :collapsed="collapsed" height="650px"
:style="{width:(collapsed?'56px':'232px')}">
<template #logo>
<img :width="collapsed ? 35 : 136" :src="iconUrl" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="item1">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-menu-item value="item2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
<t-menu-item value="item3">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型3">
<t-menu-item value="item4">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<template #operations>
<i @click="changeCollapsed" class="care-icon-arrow-right-small size-l"></i>
</template>
</t-menu>
<t-menu theme="dark" defaultValue="item1" :collapsed="collapsed" height="650px"
:style="{width:(collapsed?'56px':'232px')}">
<template #logo>
<img :width="collapsed ? 35 : 136" :src="iconUrl" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="item1">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-menu-item value="item2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
<t-menu-item value="item3">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型3">
<t-menu-item value="item4">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<template #operations>
<i @click="changeCollapsed" class="care-icon-arrow-right-small size-l"></i>
</template>
</t-menu>
<t-menu class="care-menu--black" defaultValue="item1" :collapsed="collapsed" height="650px"
:style="{width:(collapsed?'56px':'232px')}">
<template #logo>
<img :width="collapsed ? 35 : 136" :src="iconUrl" alt="logo">
</template>
<t-menu-group title="分组类型1">
<t-menu-item value="item1">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型2">
<t-menu-item value="item2">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
<t-menu-item value="item3">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<t-menu-group title="分组类型3">
<t-menu-item value="item4">
<template #icon>
<i class="care-icon-folder-close size-l"></i>
</template>
菜单内容
</t-menu-item>
</t-menu-group>
<template #operations>
<i @click="changeCollapsed" class="care-icon-arrow-right-small size-l"></i>
</template>
</t-menu>
</div>
</div>
</template>
<script>
export default {
data() {
return {
collapsed: true,
menuWidth: ['232px', '56px'],
iconUrl: 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png',
};
},
methods: {
changeCollapsed() {
this.collapsed = !this.collapsed;
this.iconUrl = this.collapsed
? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
: 'https://www.tencent.com/img/index/menu_logo_hover.png';
},
},
};
</script>
显示代码 复制代码 复制代码