一:内置过渡动画
1.fade淡入淡出

2.zoom三种缩放效果

3.collapse展开折叠

二:组件
1.layout布局:整体宽度为24,span值除以24为所占比例,与bootstrap栅格系统类似
(1)基础布局

(2)分栏间隔:gutter属性可以指定每一栏之间的间隔

(3)混合布局

(4)分栏偏移:用offset属性指定左侧偏移的栏数,offset偏移栏数加上span所占栏数的总和不大于总宽度24

(5)对齐方式:通过flex布局来进行对齐,一共有五种方式:默认,center,end,space-between,space-around
(6)响应式布局:与bootstrap响应式相同,有xs,sm,md,lg,xl五个值

2.布局容器:使用flex布局,有兼容性问题,且父子关系严格
el-container:外层容器。当子元素中包含或时,全部子元素会垂直上下排列,否则会水平左右排列。
el-header:顶栏容器。
el-aside:侧边栏容器。
el-main:主要区域容器。
el-footer:底栏容器。
3.form表单
(1)radio单选框:v-model绑定data中的radio数据,label是radio的vaule,通过label值确定默认情况下是第二个,点击哪一个哪一个的radio就是2

禁用状态:disabled

网友评论