elementUI 学习- Layout布局与UI 设定

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>