代码拉取完成,页面将自动刷新
Ant Design Pro Vue 布局,易于使用专业脚手架。
npm i antdv-pro-layout
首先,您应该将所需的 antdv-pro-layout
添加到库中。
// main.[js|ts]
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
import { ProLayout, PageContainer } from "antdv-pro-layout";
const app = createApp(App);
app.use(Antd).use(ProLayout).use(PageContainer).mount("#app");
之后,您可以在Vue组件中使用专业布局,如下所示:
<template>
<pro-layout
:locale="locale"
:menu-data="menuData"
v-bind="layoutConf"
v-model:openKeys="state.openKeys"
v-model:collapsed="state.collapsed"
v-model:selectedKeys="state.selectedKeys"
>
<router-view />
</pro-layout>
</template>
<script setup lang="ts">
import { reactive, useRouter } from "vue";
import { getMenuData, clearMenuItem, type MenuDataItem } from "antdv-pro-layout";
const locale = (menuData: MenuDataItem) => menuData.meta?.title;
const router = useRouter();
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
const state = reactive({
collapsed: false, // default value
openKeys: ["/dashboard"], // defualt openKeys
selectedKeys: ["/welcome"], // default selectedKeys
});
const layoutConf = reactive({
layout: "side",
theme: "light", // "dark" | "light",
menuTheme: "light", // "dark" | "light",
fixedHeader: true,
fixSiderbar: true,
splitMenus: true,
});
</script>
MediaQueryEnum
屏幕尺寸媒体查询枚举对象getMediaScreen
屏幕尺寸useMediaScreen
屏幕尺寸 ref响应监听prefersColorScheme
媒体主题颜色模式偏好监听viewTransitionTheme
主题切换视图过渡getMenuData
路由表转出系统菜单clearMenuItem
清除菜单项,属性排除!name和meta隐藏标记参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 布局LOGO右侧文本 | string | 'Ant Design Pro' |
logo | 布局LOGO图链接 | string | https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg |
logoStyle | 布局LOGO图样式 | object | - |
loading | 布局内容区加载等待状态 | boolean | false |
layout | 菜单布局 | 'side' | 'top' | 'mix' | 'side' |
breadcrumb | 布局内容左上角面包屑 | Object | - |
disableContentMargin | 布局内容禁用外边距 | boolean | false |
theme | 全局主题色 | 'light' |'dark' | 'light' |
menuTheme | 菜单导航主题色 | 'light' |'dark' | 'light' |
menuData | 菜单数据根据Vue-router routes 根路径'/'生成 |
Object | [{}] |
collapsed | 菜单左侧时收起展开 | boolean | true |
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 |
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))
<template #headerContentRender>
<div style="background-color: #ff7875">headerContentRender</div>
</template>
<template #headerContentRightRender>
<a-avatar shape="square" size="small"> Avatar </a-avatar>
</template>
<template #menuItemRender="{ path, meta }">
<a-menu-item
:key="path"
:disabled="meta?.disabled"
:danger="meta?.danger"
:icon="meta?.icon"
>
<router-link :to="path">
<span class="ant-pro-menu-item">
<a-badge count="5" dot>
<span class="ant-pro-menu-item-title">{{ meta?.title }}</span>
</a-badge>
</span>
</router-link>
</a-menu-item>
</template>
<template #breadcrumbRender="{ route, params, routes }">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{ route.breadcrumbName }}
</span>
<RouterLink v-else :to="{ path: route.path, params }">
{{ route.breadcrumbName }}
</RouterLink>
</template>
<template #tabRender="{ width, fixedHeader }">
<div>
<header
class="ant-layout-header"
style="height: 36px; line-height: 36px; background: transparent"
v-if="fixedHeader"
></header>
<div
:style="{
margin: '0',
height: '36px',
lineHeight: '36px',
right: '0px',
top: '48px',
position: fixedHeader ? 'fixed' : 'unset',
width: fixedHeader ? width : '100%',
overflow: 'hidden',
zIndex: 14,
padding: '4px 16px',
background: '#fff',
boxShadow: '0 1px 4px #0015291f',
transition: 'background 0.3s, width 0.2s',
}"
>
tabRender fixedHeader:{{ fixedHeader }} width:{{ width }}
</div>
</div>
</template>
<template #footerRender="{ width, fixedHeader }">
<div>
<footer
class="ant-layout-footer"
style="height: 48px; line-height: 48px; background: transparent"
v-if="fixedHeader"
></footer>
<GlobalFooter
:style="{
margin: '0',
height: '48px',
lineHeight: '48px',
right: '0px',
bottom: '0px',
position: fixedHeader ? 'fixed' : 'unset',
width: fixedHeader ? width : '100%',
overflow: 'hidden',
zIndex: 14,
background: '#fff',
boxShadow: '0 1px 4px #0015291f',
transition: 'background 0.3s, width 0.2s',
}"
:links="[
{
blankTarget: true,
title: 'Link 1',
href: '#',
},
{
blankTarget: false,
title: 'Link 2',
href: 'https://gitee.com/TsMask/',
},
{
blankTarget: true,
title: 'Link 3',
href: '#',
},
]"
copyright="Copyright © 2023 Gitee For TsMask"
>
</GlobalFooter>
</div>
</template>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
links | 必填,链接跳转 | Array<{ key?: string; title: string; href: string; blankTarget?: boolean; }> | - |
copyright | 版权声明区域 | v-slot | VNode | (props: BasicLayoutProps) => VNode | false | undefined |
prefixCls | 样式前缀 | string | ant-pro-global-footer |
<GlobalFooter
:links="[
{
blankTarget: true,
title: 'Link 1',
href: '#',
},
{
blankTarget: false,
title: 'Link 2',
href: 'https://gitee.com/TsMask/',
},
{
blankTarget: true,
title: 'Link 3',
href: '#',
},
]"
copyright="Copyright © 2023 Gitee For TsMask"
></GlobalFooter>
包含antdv组件API属性: PageHeader 页头、Affix 固钉
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
loading | 加载状态 | 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 | - |
ant-design-vue@3.x
(latest)ant-design-vue@2.2.x
(release LTS)ant-design-vue@1.7.x
当前版本,还在持续更新 v4
# 安装所需依赖
npm install
# 打包生成dist目录含d.ts文件
npm run build
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。