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的响应式，预设四个尺寸

1. xs <768px
2. sm ≥768px
3. md ≥992
4. 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.主题风格

   1. default
   2. primary 蓝色
   3. 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.颜色暗示

      1. 默认按钮，通过type的值来控制
      2. 朴素按钮，hover显示颜色 ，通过plain的boolean值来控制

      4.图标按钮

      按钮不添加字，设置icon属性即可

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