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>
3.