elementUI学习笔记（一）

elementUI学习笔记（一）

文章目录

• • • elementUI学习笔记（一）
    • • Basic
      • Form

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>