elementUI学习-Layout布局与UI设定Layout布局
1.创建布局
通过Col组件的:span属性调整Layout布局，分为24栏。
1 2 3el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>
2.分栏间隔
通过Row组件的:gutter属性来调整布局之间的宽度
1 2 3 4<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格）。
1 2 3 4<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 （中间–两边，两边会有空隙）
1 2 3 4<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的响应式，预设四个尺⼨
1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥1200
1 2 3 4 5 6<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属性。
1 2 3 4<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.主题风格
1. default
2. primary 蓝⾊
3. text ⽂字蓝⾊⽆边框
1 2 3<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button> <el-button type="text">⽂字按钮</el-button>
  2.禁⽤状态
通过修改:disabled的boolean值true,false来控制按钮是否禁⽤。
1 2 3<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.颜⾊暗⽰
1. 默认按钮，通过type的值来控制
2. 朴素按钮，hover显⽰颜⾊，通过plain的boolean值来控制
4.图标按钮
按钮不添加字，设置icon属性即可
1<el-button type="primary"icon="edit"></el-button>
4.  　按钮添加字，图标居按钮⽂字左侧
1<el-button type="primary"icon="search">搜索</el-button>
  可以在<button>⽂字右侧添加<i>标签，图标居按钮⽂字右侧
1 2 3<el-button type="primary">上传
<i class="el-icon-upload el-icon--right"></i> </el-button>
5.加载中
设置loading属性为true即可
1<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）
1 2 3 4 5 6 7 8 9 10 11 12 13 14<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14<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值）1
2 3 4 5 6 7 8 9 10 11 12 13<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
};
14 15 16 17    }
}
</script>
4.按钮组（单选）
个⼈炒鸡喜欢
lable就是显⽰的值
在按钮组当中添加<el-radio-button>就可以实现，
并且⽀持对size属性设置large和small两个属性，不设置为默认。1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<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属性绑定变量。1
htmlradio设置默认的按钮2 3 4 5 6 7 8 9 10 11 12 13<template>
<!-- `checked` 为 true或 false-->
<el-checkbox v-model="checked">备选项</el-checkbox> </template>
<script>
export default{
data() {
return{
checked: true
};
}
};
</script>
2.禁⽤状态
设置disabled属性即可。
1<el-checkbox v-model="checked2"disabled>备选项</el-checkbox> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。