elementUI study notes (1)

elementUI study notes (1)

Basic

• Use of button components

  When using the related components of elementui, all components are el-组件名at the beginning
  . All the components in elementui are 属性written on the component label

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

• Use of text link components

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

• layout layout and container layout container

  Through the basic 24 columns, you can quickly and easily create layouts.
  Through row and col components, and through the span property of col components, we can freely combine layouts

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

  Column interval: Row component provides gutter property to specify the interval between each column, the default interval is 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>
  

  Mixed layout: A more complex mixed layout is formed by arbitrarily expanding and combining the basic 1/24 columns.
  Column offset: Supports the specified number of columns to be offset, and the number of columns to be offset can be specified by setting the offset attribute of the col component

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

  How to do it: Assign the type property to'flex' to enable flex layout, and use the justify property to specify the values ​​of start, center, end, space-between, and space-around to define the layout of the child elements.

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

  Responsive layout: referring to Bootstrap’s responsive design, five response sizes are preset: xs, sm, md, lg, and xl
  . Hidden classes based on breakpoints: Element provides a series of additional class names for certain Hide elements under conditions. These class names can be added to any DOM element or custom component. If necessary, please import the following files yourself:

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

  Container layout container:

  • : Outer container
  • When the child element contains or, all the child elements will be arranged vertically up and down, otherwise they will be arranged horizontally
  • The above components adopt flex layout, please make sure the target browser is compatible before using. In addition, the child element of can only be the latter four, and the parent element of the latter four can only be

Form

• Radio radio box

  Basic usage: To use the Radio component, you only need to set the v-model binding variable. Selecting means that the value of the variable is the value of the corresponding Radio label attribute. The label can be String, Number or 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>
  

  Disabled state: as long as the disabled attribute is set in the el-radio element, it accepts a Boolean, true is disabled

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