Ant Design Vue Pro Layout

Ant Design Pro Vue 布局，易于使用专业脚手架。

中文 | English

安装 Install

1npm i antdv-pro-layout

简单使用 Simple Usage

首先，您应该将所需的 antdv-pro-layout 添加到库中。

1// main.[js|ts]
2import { createApp } from "vue";
3import App from "./App.vue";
4
5import "ant-design-vue/dist/reset.css";
6import Antd from "ant-design-vue";
7
8import "antdv-pro-layout/dist/style.css";
9import { ProLayout, PageContainer } from "antdv-pro-layout";
10
11const app = createApp(App);
12
13app.use(Antd).use(ProLayout).use(PageContainer).mount("#app");

之后，您可以在 Vue 组件中使用专业布局，如下所示：

1<template>
2  <pro-layout
3    :locale="locale"
4    :menu-data="menuData"
5    v-bind="layoutConf"
6    v-model:openKeys="state.openKeys"
7    v-model:collapsed="state.collapsed"
8    v-model:selectedKeys="state.selectedKeys"
9  >
10    <router-view />
11  </pro-layout>
12</template>
13
14<script setup lang="ts">
15import { reactive, useRouter } from "vue";
16import {
17  getMenuData,
18  clearMenuItem,
19  type MenuDataItem,
20} from "antdv-pro-layout";
21
22const locale = (menuData: MenuDataItem) => menuData.meta?.title;
23const router = useRouter();
24
25const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
26
27const state = reactive({
28  collapsed: false, // default value
29  openKeys: ["/dashboard"], // defualt openKeys
30  selectedKeys: ["/welcome"], // default selectedKeys
31});
32
33const layoutConf = reactive({
34  layout: "side",
35  theme: "light", // "dark" | "light",
36  menuTheme: "light", // "dark" | "light",
37  fixedHeader: true,
38  fixSiderbar: true,
39  splitMenus: true,
40});
41</script>

库功能支持 API

函数布局 ProLayout

• MediaQueryEnum 屏幕尺寸媒体查询枚举对象
• getMediaScreen 屏幕尺寸
• useMediaScreen 屏幕尺寸 ref 响应监听
• PrefersColorSchemeEnum 媒体主题颜色模式枚举对象
• getPrefersColorScheme 媒体主题颜色模式偏好
• usePrefersColorScheme 媒体主题颜色模式偏好 ref 响应监听
• viewTransitionTheme 主题切换视图过渡
• getMenuData 路由表转出系统菜单
• clearMenuItem 清除菜单项，属性排除!name 和 meta 隐藏标记

组件布局 ProLayout

参数	说明	类型	默认值
title	布局 LOGO 右侧文本	string	'Ant Design Pro'
logo	布局 LOGO 图链接	string	-
logoStyle	布局 LOGO 图样式	object	-
loading	布局内容区加载等待状态	boolean	false
layout	菜单布局	'side' | 'top' | 'mix'	'side'
breadcrumb	布局内容左上角面包屑	Object	-
theme	全局主题色	'light' |'dark'	'light'
menuTheme	菜单导航主题色	'light' |'dark'	'light'
menuData	菜单项数据 MenuDataItem[]	Array	[]
collapsed	菜单左侧时收起展开	boolean	true
collapsedWidth	菜单左侧时收起宽度大小	number	48
siderWidth	菜单左侧时展开宽度大小	number	200
selectedKeys	菜单选择高亮 keys	string[]	[]
openKeys	菜单选择打开展开 keys	string[]	[]
fixSiderbar	菜单左侧列表固定	boolean	false
splitMenus	菜单布局mix分割二级菜单到左侧	boolean	false
menuHeaderRender	渲染菜单头 logo 和标题区域	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	-
menuHeaderExtraRender	渲染菜单头拓展区域	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	-
menuFooterRender	渲染菜单底脚区域	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	-
menuItemRender	渲染菜单项 Menu.Item	v-slot#menuItemRender="menuItem"	-
menuSubItemRender	渲染菜单嵌套子项 Menu.SubItem	v-slot#menuSubItemRender="menuItem"	-
collapsedButtonRender	渲染菜单收起按钮区域	v-slot#collapsedButtonRender="collapsed"	-
fixedHeader	顶部区域固定	boolean	false
headerHeight	顶部区域高度	number	48
headerRender	渲染顶部区域	v-slot | VNode | (props: BasicLayoutProps) => VNode	-
headerContentRender	渲染顶部内容区域，仅布局side有效	v-slot | (props: BasicLayoutProps) => VNode	-
headerContentRightRender	渲染顶部内容右端区域	v-slot | (props: BasicLayoutProps) => VNode	-
footerRender	渲染底部区域	v-slot | ({ width, ...props }) => VNode	false
tabRender	渲染顶部标签页区域	v-slot | ({ width, ...props }) => VNode	false
breadcrumbRender	渲染面包屑导航区域	v-slot | ({ route, params, routes, paths, h }) => VNode[]	-
locale	菜单名国际化函数处理	Function(menuDataItem?: MenuDataItem) => string | false	false
collapse	菜单左侧收起展开触发函数处理	Function(collapsed: boolean) => void	-

菜单数据可通过提供的 getMenuData 和 clearMenuItem 函数转换
例如 const { menuData } = getMenuData(clearMenuItem(routes))

插槽渲染 Custom Render

渲染顶部内容区域 headerContentRender

1<template #headerContentRender>
2  <div style="background-color: #ff7875">headerContentRender</div>
3</template>
4<template #headerContentRightRender>
5  <a-avatar shape="square" size="small"> Avatar </a-avatar>
6</template>

渲染菜单项 menuItemRender Menu.Item

1<template #menuItemRender="{ path, meta }">
2  <a-menu-item
3    :key="path"
4    :disabled="meta?.disabled"
5    :danger="meta?.danger"
6    :icon="meta?.icon"
7  >
8    <router-link :to="path">
9      <span class="ant-pro-menu-item">
10        <a-badge count="5" dot>
11          <span class="ant-pro-menu-item-title">{{ meta?.title }}</span>
12        </a-badge>
13      </span>
14    </router-link>
15  </a-menu-item>
16</template>

渲染顶部头区域 breadcrumbRender

1<template #breadcrumbRender="{ route, params, routes }">
2  <span v-if="routes.indexOf(route) === routes.length - 1">
3    {{ route.breadcrumbName }}
4  </span>
5  <RouterLink v-else :to="{ path: route.path, params }">
6    {{ route.breadcrumbName }}
7  </RouterLink>
8</template>

渲染顶部标签页区域 tabRender

1<template #tabRender="{ width, fixedHeader }">
2  <div>
3    <header
4      class="ant-layout-header"
5      style="height: 36px; line-height: 36px; background: transparent"
6      v-if="fixedHeader"
7    ></header>
8    <div
9      :style="{
10        margin: '0',
11        height: '36px',
12        lineHeight: '36px',
13        right: '0px',
14        top: '48px',
15        position: fixedHeader ? 'fixed' : 'unset',
16        width: fixedHeader ? width : '100%',
17        overflow: 'hidden',
18        zIndex: 14,
19        padding: '4px 16px',
20        background: '#fff',
21        boxShadow: '0 1px 4px #0015291f',
22        transition: 'background 0.3s, width 0.2s',
23      }"
24    >
25      tabRender fixedHeader：{{ fixedHeader }} width：{{ width }}
26    </div>
27  </div>
28</template>

渲染底部区域 footerRender

1<template #footerRender="{ width, fixedHeader }">
2  <div>
3    <footer
4      class="ant-layout-footer"
5      style="height: 48px; line-height: 48px; background: transparent"
6      v-if="fixedHeader"
7    ></footer>
8    <GlobalFooter
9      :style="{
10        margin: '0',
11        height: '48px',
12        lineHeight: '48px',
13        right: '0px',
14        bottom: '0px',
15        position: fixedHeader ? 'fixed' : 'unset',
16        width: fixedHeader ? width : '100%',
17        overflow: 'hidden',
18        zIndex: 14,
19        background: '#fff',
20        boxShadow: '0 1px 4px #0015291f',
21        transition: 'background 0.3s, width 0.2s',
22      }"
23      :links="[        {          blankTarget: true,          title: 'Link 1',          href: '#',        },        {          blankTarget: false,          title: 'Link 2',          href: 'https://gitee.com/TsMask/',        },        {          blankTarget: true,          title: 'Link 3',          href: '#',        },      ]"
24      copyright="Copyright &copy; 2023 Gitee For TsMask"
25    >
26    </GlobalFooter>
27  </div>
28</template>

组件页脚 GlobalFooter

参数	说明	类型	默认值
links	必填，链接跳转	Array<{ key?: string; title: string; href: string; blankTarget?: boolean; }>	-
copyright	版权声明区域	v-slot | VNode | (props: BasicLayoutProps) => VNode | false	undefined

1<GlobalFooter
2  :links="[
3    {
4      blankTarget: true,
5      title: 'Link 1',
6      href: '#',
7    },
8    {
9      blankTarget: false,
10      title: 'Link 2',
11      href: 'https://gitee.com/TsMask/',
12    },
13    {
14      blankTarget: true,
15      title: 'Link 3',
16      href: '#',
17    },
18  ]"
19  copyright="Copyright &copy; 2023 Gitee For TsMask"
20></GlobalFooter>

组件内容页 PageContainer

包含 antdv 组件 API 属性: PageHeader 页头、Affix 固钉

参数	说明	类型	默认值
loading	加载状态	boolean	false
disableMargin	布局内容禁用外边距 24px	boolean	false
flex	内容布局充满，默认固定宽度 1200px	boolean	false
fixed-header	固定 PageHeader 到顶部	boolean	false
affixProps	固钉的配置	affix	{offsetTop: 48}
pageFooter	渲染页脚插槽	VNode | v-slot	-
pageHeader	渲染页头替换 PageHeader 组件插槽	VNode | v-slot	-
...	PageHeader 属性	PageHeader 页头 API	-
breadcrumb	PageHeader 面包屑的配置,{}配置不显示	breadcrumb	-
content	PageHeader 默认插槽	VNode | v-slot	-
contentExtra	PageHeader 默认插槽右侧空间	VNode | v-slot	-
tab-list	PageHeader 插槽 footer 无时，显示标签列表	Array<{key: string, tab: any}>	-
tab-active-key	标签列表当前激活 key	string	-
tab-change	标签列表 tab 被点击的回调	(key) => void	-
tab-props	标签列表标签页属性	tabs	-

基本使用示例 Basic Usage

项目目录下 演示测试 or 项目引用示例

测试stackblitz

源项目仓库分支 Branch

来自 @ant-design-vue/pro-layout

• next : Vue3 + ant-design-vue@3.x (latest)
• v3.1 : Vue3 + ant-design-vue@2.2.x (release LTS)
• v2 : Vue2 + ant-design-vue@1.7.x

当前版本，还在持续更新 v4

持续维护 Continuous Maintenance

1# 安装所需依赖
2npm install
3
4# 打包生成dist目录含d.ts文件
5npm run build