View UI是基于Vue的一个组件库，能够帮助前端开发人员快速构建界面！
如果您还没有接触过View UI，还不会配置开发环境，请点击这里
先看一个花里胡哨的界面，感受一下吧！
一、基础用法
View UI 中含有 Grid 栅格 组件，我们可以使用它，对界面快速的划分。
如下图所示：
View UI 中含有 <Row> 标签，它就是我们所说的行 这一个概念
上图的每一行，都是由一对<Row>标签构成，代码如下：
1. <template> 2. <div> 3. <Row> 4. <Col span="12"><Button long type="warning">ZWZ-12</Button></Col> 5. <Col span="12"><Button long type="info">ZWZ-12</Button></Col> 6. </Row> 7. </div> 8. </template>
在<Row>标签内包含了<Col>标签，就是我们所说的列。View UI将界面按照横竖快速划分，先分行，再分列。
<Col>标签中，可以设置一个属性span，就是列的宽度。
View UI将一整行平均分为24块，span属性就是当前<Col>占了几块。24是1,2,3,4,6,8,12,24的倍数，能够满足大多数的分割需求。
我这里使用加长版按钮铺满整合列，使得演示效果更加明显。
以上就是View UI中，横竖划分区域的基础用法。
二、间距分割
看了之前的界面，每个按钮之前紧密的安排在一起。但在实际应用中，明显是不行的。
列与列之前必须要有所空隙，这样才能让界面更具美感。比如下图所示：
View UI 当然考虑到了这一点，我们可以在<Row>标签中设置 gutter 属性，给列与列之前留出空隙。
| 属性名 | 属性说明 |
| gutter | 栅格间距，单位 px，左右平分 |
1. <template> 2. <div> 3. <Row :gutter="16"> 4. <Col span="8"><Button long type="primary">ZWZ-8</Button></Col> 5. <Col span="8"><Button long type="success">ZWZ-8</Button></Col> 6. <Col span="8"><Button long type="error">ZWZ-8</Button></Col> 7. </Row> 8. </div> 9. </template>
我们将<Row>标签的gutter属性设置为16,每个列之前的空隙就变成了16px，这样界面变得更加美观。
三、水平垂直居中
如果<Row>下的<Col>标签块数之和，不到24，就会出现空白的区域，如下所示：
这也是日常开发中经常遇到的问题，我们可以给<Row>标签设置align属性和justify属性，分别代表该行的垂直对齐方式和水平对齐方式。
| 属性 | 属性说明 | 属性类型 |
| align | flex 布局下的垂直对齐方式，可选值为top、middle、bottom |
String |
| justify | flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between |
String |
1. <Row align="center" justify="center" :gutter="16"> 2. </Row>
设置后，该行所在的列会被居中显示
本文首发CSDN，原文地址https://zwz99.blog.csdn.net/article/details/116882859
四、动态排序
之前横竖不管如何划分，都是固定死的。但是可曾想过，每个列需要动态定位。
比如四个列为1、2、3、4排列，某个事件后，需要1、3、2、4排列，这可咋整？
View UI作者当然也考虑到了这一点，我们只需要给<Col>标签设置order属性即可，order就是列所在行中的排序值，排序值越小越靠左。
| 属性名 | 属性说明 |
| order | 栅格的顺序，在flex布局模式下有效 |
我们给order设置一个自动变化定时器，就完成了下面的闪烁界面！
1. <template> 2. <div> 3. <Row :gutter="16"> 4. <Col span="4" :order="index41"><Button long type="error">ZWZ-4</Button></Col> 5. <Col span="4" :order="index42"><Button long type="primary">ZWZ-4</Button></Col> 6. <Col span="4" :order="index43"><Button long type="info">ZWZ-4</Button></Col> 7. <Col span="4" :order="index44"><Button long type="success">ZWZ-4</Button></Col> 8. <Col span="4" :order="index45"><Button long type="warning">ZWZ-4</Button></Col> 9. <Col span="4" :order="index46"><Button long type="error">ZWZ-4</Button></Col> 10. </Row> 11. </div> 12. </template>
以上是我在实际开发中经常使用到的点，不知你有没有get到呢？
View UI还支持响应式布局，即根据浏览器宽度动态设置所在列的宽度，当然这在我的实际开发中很少用到，所以就不再一一叙述了。
完整代码：
1. <template> 2. <div> 3. <Row :gutter="16"> 4. <Col span="12" :order="index11"><Button long type="primary">ZWZ-12</Button></Col> 5. <Col span="12" :order="index12"><Button long type="info">ZWZ-12</Button></Col> 6. </Row> 7. <br> 8. <Row :gutter="16"> 9. <Col span="8" :order="index21"><Button long type="success">ZWZ-8</Button></Col> 10. <Col span="8" :order="index22"><Button long type="warning">ZWZ-8</Button></Col> 11. <Col span="8" :order="index23"><Button long type="error">ZWZ-8</Button></Col> 12. </Row> 13. <br> 14. <Row :gutter="16"> 15. <Col span="6" :order="index31"><Button long type="primary">ZWZ-6</Button></Col> 16. <Col span="6" :order="index32"><Button long type="info">ZWZ-6</Button></Col> 17. <Col span="6" :order="index33"><Button long type="success">ZWZ-6</Button></Col> 18. <Col span="6" :order="index34"><Button long type="warning">ZWZ-6</Button></Col> 19. </Row> 20. <br> 21. <Row align="center" justify="center" :gutter="16"> 22. <Col span="4" :order="index41"><Button long type="error">ZWZ-4</Button></Col> 23. <Col span="4" :order="index42"><Button long type="primary">ZWZ-4</Button></Col> 24. <Col span="4" :order="index43"><Button long type="info">ZWZ-4</Button></Col> 25. <Col span="4" :order="index44"><Button long type="success">ZWZ-4</Button></Col> 26. <Col span="4" :order="index45"><Button long type="warning">ZWZ-4</Button></Col> 27. <Col span="4" :order="index46"><Button long type="error">ZWZ-4</Button></Col> 28. </Row> 29. </div> 30. </template> 31. 32. <script> 33. 34. export default { 35. name: 'app', 36. data() { 37. return { 38. index11: 0, 39. index12: 1, 40. index21: 0, 41. index22: 1, 42. index23: 2, 43. index31: 0, 44. index32: 1, 45. index33: 2, 46. index34: 3, 47. index41: 0, 48. index42: 1, 49. index43: 2, 50. index44: 3, 51. index45: 4, 52. index46: 5, 53. } 54. }, 55. methods: { 56. init() { 57. this.timer = setInterval(this.changeIndex, 100); 58. }, 59. changeIndex() { 60. this.index11 = (this.index11 + 1) % 2; 61. this.index12 = (this.index12 + 1) % 2; 62. this.index21 = (this.index21 + 1) % 3; 63. this.index22 = (this.index22 + 1) % 3; 64. this.index23 = (this.index23 + 1) % 3; 65. this.index31 = (this.index31 + 1) % 4; 66. this.index32 = (this.index32 + 1) % 4; 67. this.index33 = (this.index33 + 1) % 4; 68. this.index34 = (this.index34 + 1) % 4; 69. this.index41 = (this.index41 + 1) % 6; 70. this.index42 = (this.index42 + 1) % 6; 71. this.index43 = (this.index43 + 1) % 6; 72. this.index44 = (this.index44 + 1) % 6; 73. this.index45 = (this.index45 + 1) % 6; 74. this.index46 = (this.index46 + 1) % 6; 75. } 76. }, 77. mounted() { 78. this.init(); 79. } 80. } 81. </script> 82. 83. <style> 84. </style>
