Element-UI库使用

Posted 2020-11-15 shige720

　　UI库的良好使用可以大大提高开发的效率，这里记录一下对Element-UI的学习过程

 

开发前准备

　　Element-UI的官网打开（地址），之后可以用npm在开发的文件根目录下安装（npm i element-ui -S）

　　安装好就可以引入组件使用，官方文档中提及了完整引入、按需引入（需要哪个组件引入哪个组件）两种方法，都是在main.js中按说明配置即可

　　另外还有一个全局配置（设置组件尺寸和弹框的初始z-index），配置在main.js中Vue.use(ElementUI)里即可

 

下面就是对各个组件的一个学习和个人小结，实时更新

 

Layout布局

　　这里是单行的布局方式，可以理解成一行中的多个小单元格的布局

基础布局

　　el-row配置行，el-col配置列，像是一个个单行的表格

　　其中el-col上绑定的span属性控制每一个小单元格大小，默认值和最大值都是24

　　一行总数超出24时，会把原本该在一行的显示在多行

分栏间隔

　　el-row上的属性gutter，默认值为0，可以设置大于0的任意数字

　　在PC端，设置的这个gutter值为该单元格左右的padding之和

　　例如下图，gutter为40，则左右padding都是20px

　　

　　

混合布局

　　其实就是自己设置el-col的span以及el-row的gutter，没太多好说的

分栏偏移

　　el-col的offset属性，设置某个el-col元素左侧空多少份的位置，默认为0

　　如果其offset和span之和大于24，则该行剩余元素移到下一行，同时这个元素只显示一部分

　　例如下面第一个hello，offset和span之和为25，该元素只显示7份的量

　　

　　

对齐方式（响应式布局）

　　el-row里的type属性设置为flex即可，其中子元素（el-col）就变成flex布局

　　这时候左侧的offset是根据行整体来计算的，而剩余部分则不再是24份，按照span值来进行比例划分

　　例如下图，第一个元素offset是4，即左侧空出一行的4份的量（也就是一行的1/6），然后剩下的分隔，总份数为8+8+8+16=40份，则其中前三个都是剩余40份中的8，最后一个为40份里的16

　　

　　

 

 　　当el-col不设置offset，且一行的span不满24时，可以设置不同的justify属性值