# 布局
# 基本布局
<template>
<div class="tdesign-demo-item--base">
<t-layout>
<t-header>Header</t-header>
<t-content>Content</t-content>
<t-footer>Footer</t-footer>
</t-layout>
<t-layout>
<t-header>Header</t-header>
<t-layout>
<t-aside>Aside</t-aside>
<t-content>Content</t-content>
</t-layout>
<t-footer>Footer</t-footer>
</t-layout>
<t-layout>
<t-header>Header</t-header>
<t-layout>
<t-content>Content</t-content>
<t-aside>Aside</t-aside>
</t-layout>
<t-footer>Footer</t-footer>
</t-layout>
<t-layout>
<t-aside>Aside</t-aside>
<t-layout>
<t-header>Header</t-header>
<t-content>Content</t-content>
<t-footer>Footer</t-footer>
</t-layout>
</t-layout>
</div>
</template>
显示代码 复制代码 复制代码
# 侧边导航布局
Content
<template>
<div class="tdesign-demo-item--layout">
<t-layout>
<t-aside>
<t-menu theme="dark" defaultValue="dashboard" style="width:100%;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-aside>
<t-layout>
<t-content>
<div class="demo-content">Content</div>
</t-content>
</t-layout>
</t-layout>
</div>
</template>
<script>
export default {
};
</script>
显示代码 复制代码 复制代码
# 顶部导航布局
<template>
<div class="tdesign-demo-item--layout">
<t-layout >
<t-header>
<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>
</t-header>
<t-content>
<div class="demo-content">Content</div>
</t-content>
</t-layout>
</div>
</template>
<script>
export default {
data() {
return {
menu1Value: 'item2',
};
},
methods: {
changeHandler(active) {
console.log('change', active);
},
},
};
</script>
显示代码 复制代码 复制代码
# 组合导航布局
<template>
<div class="tdesign-demo-item--layout">
<t-layout>
<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>
<t-layout>
<t-aside>
<t-menu theme="light" defaultValue="dashboard" style="width:100%;border-right:1px solid rgba(0,0,0,0.1)">
<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-aside>
<t-layout>
<t-content style="display: flex; flex-direction: column;">
<div class="care-pagetitle" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<div class="care-pagetitle__content">
<t-breadcrumb>
<template v-slot:default>
<t-breadcrumbItem>页面1</t-breadcrumbItem>
<t-breadcrumbItem>页面2</t-breadcrumbItem>
<t-breadcrumbItem>页面3</t-breadcrumbItem>
</template>
<template v-slot:separator>/</template>
</t-breadcrumb>
</div>
<div class="care-pagetitle__operations">
<t-button theme="primary" variant="base">填充按钮</t-button>
</div>
</div>
<div class="demo-content" style="flex: 1;">Content</div>
</t-content>
</t-layout>
</t-layout>
</t-layout>
</div>
</template>
<script>
export default {
data() {
return {
menu1Value: 'item2',
};
},
methods: {
changeHandler(active) {
console.log('change', active);
},
},
};
</script>
显示代码 复制代码 复制代码