Layout布局
1.创建布局
通过Col组件的:span
属性调整Layout布局,分为24栏。
el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>
2.分栏间隔
通过Row组件的:gutter
属性来调整布局之间的宽度
<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> </el-row>
3.分栏漂移
通过Col组件的:offset
属性调整栅格的偏移位置(每次1格/24格)。
<el-row :gutter="20"> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> </el-row>
4.对齐方式
通过Row组件的type="flex"启动flex布局,再通过Row组件的justify属性调整排版方式,属性值分别有
start 居前(默认)
center 居中
end 居后
space-between 分布自适应(两边–中间,两边没有空隙)
around (中间–两边,两边会有空隙)
<el-row type="flex" class="row-bg" justify="center"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row>
5.响应式布局
参考bootstrap的响应式,预设四个尺寸
- xs <768px
- sm ≥768px
- md ≥992
- lg ≥1200
<el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col> </el-row>
ICON图标
今后可以使用
<i>
来做图标,给其class
添加el-icon-iconName即可。
可以在<button>
上添加icon
属性。<i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> <el-button type="primary" icon="search">搜索</el-button>
Button图标
1.主题风格
- default
- primary 蓝色
- text 文字蓝色无边框
<el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="text">文字按钮</el-button>
2.禁用状态
通过修改:disabled
的boolean值true
,false
来控制按钮是否禁用。<el-button :plain="true" :disabled="true">主要按钮</el-button> <el-button type="primary" :disabled="true">主要按钮</el-button> <el-button type="text" :disabled="true">文字按钮</el-button>
3.颜色暗示
- 默认按钮,通过
type
的值来控制 - 朴素按钮,hover显示颜色 ,通过
plain
的boolean值来控制
4.图标按钮
按钮不添加字,设置
icon
属性即可 - 默认按钮,通过
-
<el-button type="primary" icon="edit"></el-button>
按钮添加字,图标居按钮文字左侧
<el-button type="primary" icon="search">搜索</el-button>
可以在
<button>
文字右侧添加<i>
标签,图标居按钮文字右侧<el-button type="primary">上传 <i class="el-icon-upload el-icon--right"></i> </el-button>
5.加载中
设置
loading
属性为true
即可<el-button type="primary" :loading="true">加载中</el-button>
6.按钮尺寸
设置
size
属性来配置- large 大
- 正常
- small 小
- mini 超小
其他 - autofocus:是否默认对焦,boolean
- native-type:原生type,string(button,submit,reset)
-
Radio单选框(label前面到底加不加:冒号)
1.基本用法
v-model
属性用来绑定变量label
用来赋值(想要选中该单选框,label
的值必须等于v-model绑定的变量值,Number/String) -
<template> <el-radio class="radio" v-model="radio" label="1">备选项</el-radio> <el-radio class="radio" v-model="radio" label="2">备选项</el-radio> </template> <script> export default { data () { return { radio: '1' }; } } </script>
2.禁用状态
设置
disableed
的boolean值为true
-
<template> <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio> <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio> </template> <script> export default { data () { return { radio1: '选中且禁用'//此处变量值等于label变量值 }; } } </script>
3.单选框组
被
<el-radio-group>
</el-radio-group>
包含即可。只需要在
<el-radio-group>
中绑定v-model
,
在<el-radio>
中设置:label
即可。
(提供可一个change方法响应变化,会传入一个value
值) -
<template> <el-radio-group v-model="radio2"> <el-radio :label="3">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio> </el-radio-group> </template> <script> export default { data () { return { radio2: 3 }; } } </script>
4.按钮组(单选)
个人炒鸡喜欢
lable
就是显示的值
在按钮组当中添加<el-radio-button>
就可以实现,
并且支持对size
属性设置large
和small
两个属性,不设置为默认。 -
<el-radio-group v-model="radio5" :disabled="true"> <el-radio-button label="上海" :disabled="true"> </el-radio-button> <el-radio-button label="北京"></el-radio-button> <el-radio-button label="广州"></el-radio-button> <el-radio-button label="深圳"></el-radio-button> </el-radio-group> </template> <script> export default { data () { return { radio5: '上海' }; } } </script>
CheckBox单选框
1.基础用法
设置v-model
属性绑定变量。 -
<template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox> </template> <script> export default { data() { return { checked: true }; } }; </script>
- 2.禁用状态
设置
disabled
属性即可。 -
<el-checkbox v-model="checked2" disabled>备选项</el-checkbox>