English | 简体中文

Ant Design Pro Layout

Usage

1npm i @ant-design-vue/pro-layout --save
2// or
3yarn add @ant-design-vue/pro-layout

1import ProLayout from '@ant-design-vue/pro-layout'
2
3// by jsx
4export default {
5  name: 'BasicLayout',
6  render () {
7    return (
8      <ProLayout>
9        <router-view />
10      </ProLayout>
11    )
12  }
13}

1<template>
2  <pro-layout
3    :menus="menus"
4    :collapsed="collapsed"
5    :theme="theme"
6    :layout="layout"
7    :contentWidth="contentWidth"
8    :auto-hide-header="autoHideHeader"
9    :mediaQuery="query"
10    :isMobile="isMobile"
11    :handleMediaQuery="handleMediaQuery"
12    :handleCollapse="handleCollapse"
13  >
14    <template v-slot:menuHeaderRender>
15      <div>
16        <img src="../assets/logo.svg" />
17        <h1>Pro Layout</h1>
18      </div>
19    </template>
20    <template v-slot:rightContentRender>
21      <div :class="['ant-pro-global-header-index-right', layout === 'topmenu' && `ant-pro-global-header-index-${theme}`]">
22        rightContentRender
23      </div>
24    </template>
25    <template v-slot:footerRender>
26      <div>footerRender</div>
27    </template>
28    <setting-drawer navTheme="dark" />
29    <router-view />
30  </pro-layout>
31</template>
32
33<script>
34
35// by template
36import ProLayout, { SettingDrawer } from '@ant-design-vue/pro-layout'
37import { asyncRouterMap } from '../config/router.config'
38
39export default {
40  name: 'BasicLayout',
41  data () {
42    return {
43      menus: [],
44      collapsed: false,
45      autoHideHeader: false,
46      query: {},
47      layout: 'sidemenu',
48      contentWidth: 'Fluid',
49      theme: 'dark',
50      isMobile: false
51    }
52  },
53  created () {
54    this.menus = asyncRouterMap.find(item => item.path === '/').children
55  },
56  methods: {
57    handleMediaQuery (query) {
58      this.query = query
59      if (this.isMobile && !query['screen-xs']) {
60        this.isMobile = false
61        return
62      }
63      if (!this.isMobile && query['screen-xs']) {
64        this.isMobile = true
65        this.collapsed = false
66      }
67    },
68    handleCollapse (collapsed) {
69      this.collapsed = collapsed
70    }
71  },
72  components: {
73  	SettingDrawer
74  }
75}
76</script>

API

ProLayout

Property	Description	Type	Default Value
title	layout in the upper left corner title	VNode | String	'Ant Design Pro'
logo	layout top left logo url	VNode | render	-
loading*	layout loading status	boolean	-
layout	layout menu mode, sidemenu: right navigation, topmenu: top navigation	'sidemenu' | 'topmenu'	'sidemenu'
contentWidth	content mode of layout, Fluid: adaptive, Fixed: fixed width 1200px	'Fixed' | 'Fluid'	Fluid
theme	Navigation menu theme	'light' | 'dark'	'dark'
menus	Vue-router routes prop	Object	[{}]
collapsed	control menu's collapse and expansion	boolean	true
isMobile	is mobile	boolean	false
handleCollapse	folding collapse event of menu	(collapsed: boolean) => void	-
menuHeaderRender	render logo and title	v-slot | VNode | (logo,title)=>VNode | false	-
headerRender	custom header render method	(props: BasicLayoutProps) => VNode	-
rightContentRender	header right content render method	(props: HeaderViewProps) => VNode	-
collapsedButtonRender	custom collapsed button method	(collapsed: boolean) => VNode	-
footerRender	custom footer render method	(props: BasicLayoutProps) => VNode	-
breadcrumbRender	custom breadcrumb render method	({ route, params, routes, paths, h }) => VNode[]	-
i18nRender	i18n	Function (key: string) => string | false	false
handleMediaQuery	media matchs callback	(querys: []) => void	-
mediaQuery	media matchs	Array	-

PageHeaderWrapper

Property	Description	Type	Default Value
content	Content area	VNode | v-slot	-
extra	Extra content area, on the right side of content	VNode | v-slot	-
extraContent	Extra content area, on the right side of content	VNode | v-slot	-
tabList	Tabs title list	Array<{key: string, tab: sting}>	-
tab-change	Switch panel callback	(key) => void	-
tab-active-key	The currently highlighted tab item	string	-

SettingDrawer

{settings}

Property	Description	Type	Default Value
theme	Theme	dark light realDark	light
layout	Sider Layout	sidemenu topmenu	sidemenu
primaryColor	Primary color (*development only)	#1890ff
contentWidth	content mode of layout, Fluid: adaptive, Fixed: fixed width 1200px	'Fixed' | 'Fluid'	Fluid