Python私教张大鹏 Vue3整合AntDesignVue之Layout布局

案例：栅格布局

核心代码：

<template><a-row><a-col :span="24">col</a-col></a-row><a-row><a-col :span="12">col-12</a-col><a-col :span="12">col-12</a-col></a-row><a-row><a-col :span="8">col-8</a-col><a-col :span="8">col-8</a-col><a-col :span="8">col-8</a-col></a-row><a-row><a-col :span="6">col-6</a-col><a-col :span="6">col-6</a-col><a-col :span="6">col-6</a-col><a-col :span="6">col-6</a-col></a-row>
</template>

vue3示例：

<script setup="">
</script>
<template><a-row><a-col :span="24" class="bg-indigo-500 h-32">24</a-col></a-row><a-row><a-col :span="12" class="bg-red-500 h-32">24</a-col><a-col :span="12" class="bg-blue-500 h-32">24</a-col></a-row><a-row><a-col :span="8" class="bg-cyan-500 h-32">24</a-col><a-col :span="8" class="bg-yellow-500 h-32">24</a-col><a-col :span="8" class="bg-purple-500 h-32">24</a-col></a-row>
</template>
<style scoped></style>

在这里插入图片描述

案例：列偏移

核心代码：

<template><a-row><a-col :span="8">col-8</a-col><a-col :span="8" :offset="8">col-8</a-col></a-row><a-row><a-col :span="6" :offset="6">col-6 col-offset-6</a-col><a-col :span="6" :offset="6">col-6 col-offset-6</a-col></a-row><a-row><a-col :span="12" :offset="6">col-12 col-offset-6</a-col></a-row>
</template>

vue3示例：

<script setup="">
</script>
<template>
<a-row><a-col :span="8" class="h-32 bg-indigo-500">1</a-col><a-col :span="8" :offset="8" class="h-32 bg-red-500">2</a-col>
</a-row>
</template>
<style scoped></style>

在这里插入图片描述

案例：上中下布局

核心代码：

<a-layout><a-layout-header :style="headerStyle">Header</a-layout-header><a-layout-content :style="contentStyle">Content</a-layout-content><a-layout-footer :style="footerStyle">Footer</a-layout-footer>
</a-layout>

const headerStyle: CSSProperties = {textAlign: 'center',color: '#fff',height: 64,paddingInline: 50,lineHeight: '64px',backgroundColor: '#7dbcea',
};const contentStyle: CSSProperties = {textAlign: 'center',minHeight: 120,lineHeight: '120px',color: '#fff',backgroundColor: '#108ee9',
};const siderStyle: CSSProperties = {textAlign: 'center',lineHeight: '120px',color: '#fff',backgroundColor: '#3ba0e9',
};const footerStyle: CSSProperties = {textAlign: 'center',color: '#fff',backgroundColor: '#7dbcea',
};

vue3示例：

<script setup>
const headerStyle = {textAlign: "center",color: "#fff",height: "64px",paddingInline: 50,lineHeight: "64px",backgroundColor: "#7dbcea"
}const contentStyle = {textAlign: "center",minHeight: "570px",color: "#fff",backgroundColor: "#108ee9"
}
const footerStyle = {textAlign: "center",color: "#fff",backgroundColor: "#7dbcea"
}
</script>
<template><a-layout><a-layout-header :style="headerStyle">头部</a-layout-header><a-layout-content :style="contentStyle">内容</a-layout-content><a-layout-footer :style="footerStyle">底部</a-layout-footer></a-layout>
</template>
<style scoped></style>

在这里插入图片描述

案例：上左右下布局

核心代码：

<a-layout><a-layout-header :style="headerStyle">Header</a-layout-header><a-layout><a-layout-sider :style="siderStyle">Sider</a-layout-sider><a-layout-content :style="contentStyle">Content</a-layout-content></a-layout><a-layout-footer :style="footerStyle">Footer</a-layout-footer>
</a-layout>

const headerStyle: CSSProperties = {textAlign: 'center',color: '#fff',height: 64,paddingInline: 50,lineHeight: '64px',backgroundColor: '#7dbcea',
};const contentStyle: CSSProperties = {textAlign: 'center',minHeight: 120,lineHeight: '120px',color: '#fff',backgroundColor: '#108ee9',
};const siderStyle: CSSProperties = {textAlign: 'center',lineHeight: '120px',color: '#fff',backgroundColor: '#3ba0e9',
};const footerStyle: CSSProperties = {textAlign: 'center',color: '#fff',backgroundColor: '#7dbcea',
};

vue3示例：

<script setup>
const headerStyle = {height: "64px",lineHeight: "64px",color: "#fff",backgroundColor: "#7dbcea",textAlign: "center",
}const sideStyle = {minHeight: "570px",backgroundColor: "#3ba0e9"
}const footerStyle = {textAlign: "center",color:"#fff",backgroundColor:"#7dbcea"
}
</script>
<template><a-layout><a-layout-header :style="headerStyle">头部</a-layout-header><a-layout><a-layout-sider :style="sideStyle">侧边</a-layout-sider><a-layout-content>内容</a-layout-content></a-layout><a-layout-footer :style="footerStyle">底部</a-layout-footer></a-layout>
</template>

在这里插入图片描述

实战：后台管理系统布局

核心代码：

<template><a-layout class="layout"><a-layout-header><div class="logo" /><a-menuv-model:selectedKeys="selectedKeys"theme="dark"mode="horizontal":style="{ lineHeight: '64px' }"><a-menu-item key="1">nav 1</a-menu-item><a-menu-item key="2">nav 2</a-menu-item><a-menu-item key="3">nav 3</a-menu-item></a-menu></a-layout-header><a-layout-content style="padding: 0 50px"><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item>List</a-breadcrumb-item><a-breadcrumb-item>App</a-breadcrumb-item></a-breadcrumb><div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div></a-layout-content><a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer></a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const selectedKeys = ref<string[]>(['2']);
</script>
<style scoped>
.site-layout-content {min-height: 280px;padding: 24px;background: #fff;
}
#components-layout-demo-top .logo {float: left;width: 120px;height: 31px;margin: 16px 24px 16px 0;background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {float: right;margin: 16px 0 16px 24px;
}[data-theme='dark'] .site-layout-content {background: #141414;
}
</style>

vue3代码：

<script setup>
import {ref} from 'vue';const selectedKeys = ref(['2']);
</script><template><a-layout class="layout"><!--头部--><a-layout-header><div class="logo"/><a-menuv-model:selectedKeys="selectedKeys"theme="dark"mode="horizontal":style="{ lineHeight: '64px' }"><a-menu-item key="1">首页</a-menu-item><a-menu-item key="2">数据分析平台</a-menu-item><a-menu-item key="3">数据管理系统</a-menu-item></a-menu></a-layout-header><a-layout-content style="padding: 0 50px"><!--面包屑导航--><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>首页</a-breadcrumb-item><a-breadcrumb-item>数据分析平台</a-breadcrumb-item><a-breadcrumb-item>面板</a-breadcrumb-item></a-breadcrumb><!--核心内容区域--><div :style="{ background: '#fff', padding: '24px', minHeight: '480px' }">核心内容填写在这儿</div></a-layout-content><!--底部--><a-layout-footer style="text-align: center">Python私教 张大鹏 ©2024 版权所有</a-layout-footer></a-layout>
</template>

在这里插入图片描述

实战：后台管理系统布局2

核心代码：

<template><a-layout><a-layout-header class="header"><div class="logo" /><a-menuv-model:selectedKeys="selectedKeys1"theme="dark"mode="horizontal":style="{ lineHeight: '64px' }"><a-menu-item key="1">nav 1</a-menu-item><a-menu-item key="2">nav 2</a-menu-item><a-menu-item key="3">nav 3</a-menu-item></a-menu></a-layout-header><a-layout-content style="padding: 0 50px"><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item>List</a-breadcrumb-item><a-breadcrumb-item>App</a-breadcrumb-item></a-breadcrumb><a-layout style="padding: 24px 0; background: #fff"><a-layout-sider width="200" style="background: #fff"><a-menuv-model:selectedKeys="selectedKeys2"v-model:openKeys="openKeys"mode="inline"style="height: 100%"><a-sub-menu key="sub1"><template #title><span><user-outlined />subnav 1</span></template><a-menu-item key="1">option1</a-menu-item><a-menu-item key="2">option2</a-menu-item><a-menu-item key="3">option3</a-menu-item><a-menu-item key="4">option4</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><template #title><span><laptop-outlined />subnav 2</span></template><a-menu-item key="5">option5</a-menu-item><a-menu-item key="6">option6</a-menu-item><a-menu-item key="7">option7</a-menu-item><a-menu-item key="8">option8</a-menu-item></a-sub-menu><a-sub-menu key="sub3"><template #title><span><notification-outlined />subnav 3</span></template><a-menu-item key="9">option9</a-menu-item><a-menu-item key="10">option10</a-menu-item><a-menu-item key="11">option11</a-menu-item><a-menu-item key="12">option12</a-menu-item></a-sub-menu></a-menu></a-layout-sider><a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">Content</a-layout-content></a-layout></a-layout-content><a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer></a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
const selectedKeys1 = ref<string[]>(['2']);
const selectedKeys2 = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
</script>
<style scoped>
#components-layout-demo-top-side .logo {float: left;width: 120px;height: 31px;margin: 16px 24px 16px 0;background: rgba(255, 255, 255, 0.3);
}.ant-row-rtl #components-layout-demo-top-side .logo {float: right;margin: 16px 0 16px 24px;
}.site-layout-background {background: #fff;
}
</style>

vue3示例：

<script setup>
import {ref} from 'vue';
import {UserOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons-vue';const selectedKeys1 = ref(['2']);
const selectedKeys2 = ref(['1']);
const openKeys = ref(['sub1']);
</script><template><a-layout><!--头部--><a-layout-header class="header"><a-menuv-model:selectedKeys="selectedKeys1"theme="dark"mode="horizontal":style="{ lineHeight: '64px' }"><a-menu-item key="1">首页</a-menu-item><a-menu-item key="2">数据分析平台</a-menu-item><a-menu-item key="3">数据管理平台</a-menu-item></a-menu></a-layout-header><a-layout-content style="padding: 0 50px"><!--面包屑导航--><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>首页</a-breadcrumb-item><a-breadcrumb-item>数据分析平台</a-breadcrumb-item><a-breadcrumb-item>面板</a-breadcrumb-item></a-breadcrumb><a-layout style="padding: 24px 0; background: #fff"><!--左侧菜单--><a-layout-sider width="200" style="background: #fff"><a-menuv-model:selectedKeys="selectedKeys2"v-model:openKeys="openKeys"mode="inline"style="height: 100%"><a-sub-menu key="sub1"><template #title><span><user-outlined/>模型管理</span></template><a-menu-item key="1">导入</a-menu-item><a-menu-item key="2">导出</a-menu-item><a-menu-item key="3">生成</a-menu-item><a-menu-item key="4">重启</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><template #title><span><laptop-outlined/>权限管理</span></template><a-menu-item key="5">用户管理</a-menu-item><a-menu-item key="6">角色管理</a-menu-item><a-menu-item key="7">权限管理</a-menu-item><a-menu-item key="8">菜单管理</a-menu-item></a-sub-menu><a-sub-menu key="sub3"><template #title><span><notification-outlined/>文件管理</span></template><a-menu-item key="9">minio 文件管理</a-menu-item><a-menu-item key="10">阿里 OSS 管理</a-menu-item><a-menu-item key="11">七牛云文件管理</a-menu-item><a-menu-item key="12">本地文件管理</a-menu-item></a-sub-menu></a-menu></a-layout-sider><!--内容--><a-layout-content :style="{ padding: '0 24px', minHeight: '460px' }">核心内容填写在这儿</a-layout-content></a-layout></a-layout-content><!--底部--><a-layout-footer style="text-align: center">Python私教 张大鹏 ©2024 版权所有</a-layout-footer></a-layout>
</template>

在这里插入图片描述

实战：侧边布局

侧边两列式布局。页面横向空间有限时，侧边导航可收起。
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

核心代码：

<template><a-layout style="min-height: 100vh"><a-layout-sider v-model:collapsed="collapsed" collapsible><div class="logo" /><a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"><a-menu-item key="1"><pie-chart-outlined /><span>Option 1</span></a-menu-item><a-menu-item key="2"><desktop-outlined /><span>Option 2</span></a-menu-item><a-sub-menu key="sub1"><template #title><span><user-outlined /><span>User</span></span></template><a-menu-item key="3">Tom</a-menu-item><a-menu-item key="4">Bill</a-menu-item><a-menu-item key="5">Alex</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><template #title><span><team-outlined /><span>Team</span></span></template><a-menu-item key="6">Team 1</a-menu-item><a-menu-item key="8">Team 2</a-menu-item></a-sub-menu><a-menu-item key="9"><file-outlined /><span>File</span></a-menu-item></a-menu></a-layout-sider><a-layout><a-layout-header style="background: #fff; padding: 0" /><a-layout-content style="margin: 0 16px"><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>User</a-breadcrumb-item><a-breadcrumb-item>Bill</a-breadcrumb-item></a-breadcrumb><div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">Bill is a cat.</div></a-layout-content><a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer></a-layout></a-layout>
</template>
<script lang="ts" setup>
import {PieChartOutlined,DesktopOutlined,UserOutlined,TeamOutlined,FileOutlined,
} from '@ant-design/icons-vue';
import { ref } from 'vue';
const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(['1']);
</script>
<style scoped>
#components-layout-demo-side .logo {height: 32px;margin: 16px;background: rgba(255, 255, 255, 0.3);
}.site-layout .site-layout-background {background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {background: #141414;
}
</style>

vue3示例：

<script setup>
import {PieChartOutlined,DesktopOutlined,UserOutlined,TeamOutlined,FileOutlined,
} from '@ant-design/icons-vue';
import {ref} from 'vue';const collapsed = ref(false);
const selectedKeys = ref(['1']);
</script><template><a-layout style="min-height: 100vh"><!--侧边菜单--><a-layout-sider v-model:collapsed="collapsed" collapsible><a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"><a-menu-item key="1"><pie-chart-outlined/><span>首页</span></a-menu-item><a-menu-item key="2"><desktop-outlined/><span>面板</span></a-menu-item><a-sub-menu key="sub1"><template #title><span><user-outlined/><span>权限管理</span></span></template><a-menu-item key="3">用户管理</a-menu-item><a-menu-item key="4">角色管理</a-menu-item><a-menu-item key="5">权限管理</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><template #title><span><team-outlined/><span>文件管理</span></span></template><a-menu-item key="6">本地文件管理</a-menu-item><a-menu-item key="8">minio 文件管理</a-menu-item></a-sub-menu><a-menu-item key="9"><file-outlined/><span>文档</span></a-menu-item></a-menu></a-layout-sider><!--内容--><a-layout><a-layout-content style="margin: 0 16px"><!--面包屑导航--><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>首页</a-breadcrumb-item><a-breadcrumb-item>面板</a-breadcrumb-item></a-breadcrumb><!--核心内容区域--><a-layout-content :style="{ padding: '24px', background: '#fff', minHeight: '520px' }">核心的内容填写在这里</a-layout-content></a-layout-content><!--底部--><a-layout-footer style="text-align: center">Python私教 张大鹏 ©2024 版权所有</a-layout-footer></a-layout></a-layout>
</template>

在这里插入图片描述

实战：自定义触发器

要使用自定义触发器，可以设置 :trigger=“null” 来隐藏默认设定。

核心代码：

<template><a-layout><a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible><div class="logo" /><a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"><a-menu-item key="1"><user-outlined /><span>nav 1</span></a-menu-item><a-menu-item key="2"><video-camera-outlined /><span>nav 2</span></a-menu-item><a-menu-item key="3"><upload-outlined /><span>nav 3</span></a-menu-item></a-menu></a-layout-sider><a-layout><a-layout-header style="background: #fff; padding: 0"><menu-unfold-outlinedv-if="collapsed"class="trigger"@click="() => (collapsed = !collapsed)"/><menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" /></a-layout-header><a-layout-content:style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">Content</a-layout-content></a-layout></a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {UserOutlined,VideoCameraOutlined,UploadOutlined,MenuUnfoldOutlined,MenuFoldOutlined,
} from '@ant-design/icons-vue';
const selectedKeys = ref<string[]>(['1']);
const collapsed = ref<boolean>(false);
</script>
<style>
#components-layout-demo-custom-trigger .trigger {font-size: 18px;line-height: 64px;padding: 0 24px;cursor: pointer;transition: color 0.3s;
}#components-layout-demo-custom-trigger .trigger:hover {color: #1890ff;
}#components-layout-demo-custom-trigger .logo {height: 32px;background: rgba(255, 255, 255, 0.3);margin: 16px;
}.site-layout .site-layout-background {background: #fff;
}
</style>

vue3示例：

<script setup>
import {ref} from 'vue';
import {UserOutlined,VideoCameraOutlined,UploadOutlined,MenuUnfoldOutlined,MenuFoldOutlined,
} from '@ant-design/icons-vue';const selectedKeys = ref(['1']);
const collapsed = ref(false);
</script><template><a-layout><a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible><!--左侧菜单--><a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"><a-menu-item key="index"><span>首页</span></a-menu-item><a-menu-item key="1"><user-outlined/><span>权限管理</span></a-menu-item><a-menu-item key="2"><video-camera-outlined/><span>媒体管理</span></a-menu-item><a-menu-item key="3"><upload-outlined/><span>文件管理</span></a-menu-item></a-menu></a-layout-sider><a-layout><!--顶部--><a-layout-header style="background: #fff; padding: 0; margin-left: 3px;"><menu-unfold-outlinedv-if="collapsed"@click="() => (collapsed = !collapsed)"/><menu-fold-outlinedv-else@click="() => (collapsed = !collapsed)"/></a-layout-header><!--内容--><a-layout-content:style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '580px' }">核心内容填写在这里</a-layout-content></a-layout></a-layout>
</template>