vue-element-ui组件 layout布局（网格系统）

首先你要掌握的基础知识:

.row 行概念

 

<el-row></el-row>

 

.col 列概念

 

<el-col></el-col>

 

col组件的:span属性的布局调整,一共分为24栏:

 

代码示例:

1. <el-row>

2. <el-col :span="24"><div class="grid-content"></div></el-col>

3. </el-row>

1. <el-row>

2. <el-col :span="12"><div class="grid-content"></div></el-col>

3. </el-row>

 

效果:

第一个:

第二个:

row组件的:gutter属性来调整布局之间的宽度---分栏间隔

代码示例:

1. <el-row :gutter="20">

2. <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>

3. <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>

4. </el-row>

 

效果:

 

 

Col组件的:offset属性调整方块的偏移位置（每次1格/24格）

 

1. <el-row :gutter="20">

2. <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>

3. <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>

4. </el-row>

 

效果:

 

对齐方式:

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

 

1. justify=center 居中对齐
2. justify=start 左对齐
3. justify=end 右对齐
4. justify=space-between 空格间距在中间对齐
5. justify=space-around 左右各占半格空格对齐

1. <el-row type="flex" class="row-bg" justify="center">

2. <el-col :span="6"><div class="grid-content"></div></el-col>

3. </el-row>

效果:

 

响应式布局:

参考bootstrap的响应式，预设四个尺寸

1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥120

使用方式:

1. <el-row :gutter="10">

2. <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>

3. <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>

4. <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>

5. <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>

6. </el-row>

 

练习示例:

 

1. <span class="field-label">方块选择:</span>

2. <!-- 选择屏幕框 -->

3. <select v-model="selected" @change="selectbj(selected)">

4. <option v-for="option in layouts" :value="option.value">

5. {{ option.name }}

6. </option>

7. </select>

 

data默认初始化数据:

1. selected: 0,

2. layouts: [

3. { 'name': '1x1模式', 'value': '0' },

4. { 'name': '2x1模式', 'value': '1' },

5. { 'name': '2x2模式', 'value': '2' },

6. { 'name': '3x2模式', 'value': '3' },

7. { 'name': '3x3模式', 'value': '4' },

8. { 'name': '1+5模式', 'value': '5' }

9. ],

 

布局代码:

1. <el-main v-model="selected" >

2. <div class="block" style="height:400px">

3. <!-- {{selected}} -->

4. <div style="height:100%;width:100%" v-if="selected==0">

5. <!-- 1*1布局 -->

6. <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">

7. <el-col :span="24"></el-col>

8. </el-row>

9. </div>

10. <!-- 2*1布局 -->

11. <div style="height:100%;width:100%" v-else-if="selected==1">

12. <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">

13. <el-col :span="12"><div class="grid-content "></div></el-col>

14. <el-col :span="12"><div class="grid-content "></div></el-col>

15. </el-row>

16. </div>

17. <!-- 2*2 -->

18. <div style="height:100%;width:100%" v-else-if="selected==2">

19. <el-row :gutter="10" type="flex" class="row-bg" justify="center">

20. <el-col :span="12"><div class="grid-content "></div></el-col>

21. <el-col :span="12"><div class="grid-content "></div></el-col>

22. </el-row>

23. <br>

24. <el-row :gutter="10" type="flex" class="row-bg" justify="center">

25. <el-col :span="12"><div class="grid-content "></div></el-col>

26. <el-col :span="12"><div class="grid-content "></div></el-col>

27. </el-row>

28. </div>

29. <!-- 3*2布局 -->

30. <div style="height:100%;width:100%" v-else-if="selected==3">

31. <el-row :gutter="10" type="flex" class="row-bg" justify="center">

32. <el-col :span="12"><div class="grid-content "></div></el-col>

33. <el-col :span="12"><div class="grid-content "></div></el-col>

34. <el-col :span="12"><div class="grid-content "></div></el-col>

35. </el-row>

36. <br>

37. <el-row :gutter="10" type="flex" class="row-bg" justify="center">

38. <el-col :span="12"><div class="grid-content "></div></el-col>

39. <el-col :span="12"><div class="grid-content "></div></el-col>

40. <el-col :span="12"><div class="grid-content "></div></el-col>

41. </el-row>

42. </div>

43. <!-- 3*3模式 -->

44. <div style="height:100%;width:100%" v-else-if="selected==4">

45. <el-row :gutter="10" type="flex" class="row-bg" justify="center">

46. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

47. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

48. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

49. </el-row>

50. <br>

51. <el-row :gutter="10" type="flex" class="row-bg" justify="center">

52. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

53. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

54. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

55. </el-row>

56. <br>

57. <el-row :gutter="10" type="flex" class="row-bg" justify="center">

58. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

59. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

60. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

61. </el-row>

62. </div>

63. <!-- 模式 -->

64. <div style="height:100%;width:100%" v-else>

65. <el-row :gutter="10" type="flex" class="row-bg" justify="start">

66. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

67. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

68. <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>

69. </el-row>

70. <br>

71. <el-row :gutter="10" type="flex" class="row-bg" justify="start">

72. <el-col :span="8">

73. <div class="grid-a-contentWidth"></div>

74. <br>

75. <div class="grid-a-contentWidth"></div>

76. </el-col>

77. <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>

78. </el-row>

79. </div>

80. </div>

81. </el-main>

 

样式(从里面对应取一下):

1. <style scoped>

2. .box-card{

3. width: 400px;

4. margin: 20px auto;

5. }

6. .block{

7. padding: 30px 24px;

8. background-color: rgb(27, 16, 16);

9. }

10. .alert-item{

11. margin-bottom: 10px;

12. }

13. .tag-item{

14. margin-right: 15px;

15. }

16. .link-title{

17. margin-left:35px;

18. }

19. .components-container {

20. position: relative;

21. height: 100vh;

22. }

23.  

24. .left-container {

25. background-color: #F38181;

26. height: 100%;

27. }

28.  

29. .right-container {

30. background-color: #FCE38A;

31. height: 200px;

32. }

33.  

34. .top-container {

35. background-color: #FCE38A;

36. width: 100%;

37. height: 100%;

38. }

39.  

40. .bottom-container {

41. width: 100%;

42. background-color: #95E1D3;

43. height: 100%;

44. }

45.  

46. .left-container-twoOne {

47. background-color: rgb(110, 75, 75);

48. height: 100%;

49. }

50.  

51. .container-onetoOne {

52. background-color: rgb(47, 80, 74);

53. height: 100%;

54. width: 50%;

55. }

56.  

57. .container-onetoTwo {

58. background-color: rgb(61, 19, 56);

59. height: 100%;

60. width: 50%;

61. }

62.  

63. .el-col {

64. border-radius: 4px;

65. }

66. .bg-purple-dark {

67. background: #57926b;

68. }

69. .bg-purple {

70. background: #7e2970;

71. }

72. .bg-purple-light {

73. background: #071c4d;

74. }

75. .grid-content {

76. background-color: rgb(44, 143, 121);

77. border-radius: 4px;

78. min-height: 150px;

79. min-width: 100px;

80. }

81. .grid-contentB {

82. background-color: rgb(64, 56, 134);

83. border-radius: 4px;

84. min-height: 150px;

85. min-width: 100px;

86. }

87. .grid-a-contentWidth {

88. background-color: rgb(44, 143, 121);

89. border-radius: 4px;

90. min-height: 100px;

91. }

92. .grid-a-content-a-Width {

93. background-color: rgb(44, 143, 121);

94. border-radius: 4px;

95. min-height: 220px;

96. }

97.  

98. .grid-one-contentheight {

99. background-color: rgb(44, 143, 121);

100. border-radius: 4px;

101. min-height: 100%;

102. }

103.  

104. .el-row-two {

105. margin-bottom: 80px;

106. margin-top: 80px;

107.  

108. }

109. </style>

效果: