Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<d-container>：外层容器。

<d-header>：顶栏。

<d-content>：内容显示区。

<d-menu>：侧边栏。

<d-footer>：底栏。

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

<template>
	<el-scrollbar id="layout">
		<d-container>
			<d-header
				logo-name="工作台"
				title="个人中心"
				logo="https://img1.baidu.com/it/u=3254254623,2492769581&fm=26&fmt=auto&gp=0.jpg"
			/>

			<main class="d-main">
				<d-menu
					:default-active="active"
					:router="false"
					:menus="menus"
				/>

				<d-content title="测试">
					<div class="d-router-view">
						<p v-for="item in 100" :key="item">{{ item }}</p>
					</div>
				</d-content>
			</main>

			<d-footer />
		</d-container>
	</el-scrollbar>
</template>

<script>
	export default {
		data() {
			return {
				active: 'link',
				menus: [
					{ path: 'link', title: 'Link' },
					{ path: 'dialog', title: 'Dialog' },
					{ path: 'modal', title: 'Modal' },
					{ path: 'table', title: 'Table' },
					{ path: 'form', title: 'Form' },
					{ path: 'upload', title: 'Upload' },
					{ path: 'tabs', title: 'Tabs' },
				],
			};
		},
	};
</script>

<style>
	#layout {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		height: 500px;
	}
	#layout .el-scrollbar__wrap {
		overflow-x: hidden;
	}
	.el-scrollbar__view {
		height: 100%;
	}
	.el-scrollbar__bar.is-horizontal {
		height: 0;
	}
	.vuepress-plugin-demo-block__app {
		position: relative;
	}
	.d-container .d-main,
	.d-container .d-header .d-header-content {
		max-width: 100%;
		min-width: 100%;
	}
	.vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__display {
		max-height: 600px;
	}
</style>

<= delete spaces here

显示代码 复制代码 复制代码

提示

d-header、d-content、d-footer 只能在 d-container 中使用，否则样式不受控制

Header Attributes

参数	说明	类型	默认值
logo	左上角展示 logo	string	_
logo-name	左上角展示文字	string	_
title	标题	string	_
href	logo 跳转链接	string	_

Content Attributes

参数	说明	类型	默认值
show-back	是否显示返回按钮	boolean	fales
title	Content 标题	string	_
exclude	不需要显示 title 的页面的集合,值为 $route.name	string[]	_

Menu Attributes

参数	说明	类型	默认值
default-active	当前激活的状态名称	string	_
menus	导航栏数据	object[]	[]