elementUI学习笔记（一）

elementUI学习笔记（一）

Basic

• 按钮组件的使用

  使用elementui的相关组件时所有组件都是el-组件名开头
  在elementui中所有组件的属性全部写在组件标签上

  <el-button  属性名=“属性”>默认按钮</el-button>
  
  

• 文字链接组件的使用

  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  

• layout布局和container布局容器

  通过基础的 24 分栏，迅速简便地创建布局
  通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局

  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
   </el-row>
  

  分栏间隔：Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0

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

  混合布局：通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局
  分栏偏移：支持偏移指定的栏数，通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数

  <el-row :gutter="20">
    <el-col :span="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>
  

  对其方式：将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-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-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row>
  

  响应式布局：参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl
  基于断点的隐藏类：Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：

  import 'element-ui/lib/theme-chalk/display.css';
  

  container布局容器 ：

  • ：外层容器
  • 当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列
  • 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， 的子元素只能是后四者，后四者的父元素也只能是

Form

• Radio 单选框

  基础用法：要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean

  <template>
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
  </template>
  <script>
    export default {
         
         
      data () {
         
         
        return {
         
         
          radio: '1'
        };
      }
    }
   </script>
  

  禁用状态：只要在el-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用

  <template>
    <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
    <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>      </template>
  
  <script>
    export default {
         
         
      data () {
         
         
        return {
         
         
          radio: '选中且禁用'
        };
      }
    }
  </script>