The official documentation

01. Getting started and installing Element UI

    1. Element UI: A vue.js-based front-end component library for traditional desktops;
    1. It is based on vue-CLI scaffolding, need to learn after vue.js (core piece + tool piece);
    1. Installation environment, need to install node.js environment, vue.js scaffolding and other tools;
    1. First, install vue.js scaffolding,
      vue create cli
      Copy the code
    1. Switch to the installed CLI directory and install Element UI as follows:
      npm i element-ui -S
      Copy the code
    1. Introduce Element UI in scaffolding main.js with the following command:
      import ElementUI from 'element    
      import 'element-ui/lib/theme-chalk/index.css'     
      Copy the code

02. Layout Layout

    1. Basic concept: A row is laid out by dividing it into 24 grid columns, if the row is to be filled as follows:
      <! -- el-row indicates a row --> <! - el - a column col said - - > < el - row > < el - col: span = "24" > 24 < / el - col > < / el - row >Copy the code
    1. How to set up 18 grid fields, so that 6 places are left blank area;
          <el-col :span="18">18</el-col>
      .el-row {
            background-color: #42b983;
            margin: 20px 0;
      .el-col {
            background-color: pink;
            color: white;
            padding: 10px 0;
      Copy the code
    1. If you want four columns to fill 24 grid columns, each column will fill 6 grid columns;
      <el-row> <el-col :span="6">6</el-col> <el-col :span="6">6</el-col> <el-col :span="6">6</el-col> <el-col :span="6">6</el-col> </el-row> .el-col { background-color: pink; color: white; padding: 10px 0; border-right: 1px solid #eee; box-sizing: border-box; /* Border does not occupy space */}Copy the code
    1. The el-col child element in the manual has a layer of div, which can be set to :gutter;
      <el-row :gutter="10">
           <el-col :span="6"><div style="background-color: pink">6</div></el-col>
           <el-col :span="6"><div style="background-color: pink">6</div></el-col>
           <el-col :span="6"><div style="background-color: pink">6</div></el-col>
           <el-col :span="6"><div style="background-color: pink">6</div></el-col>
      Copy the code

      PS: Through the above can achieve a variety of mixed layout, the total calculated value is less than or equal to 24 in a row;

    1. Use type=”flex” to set the alignment of the field, and use justify to set the direction.
      <el-row type="flex" justify="centet"></el-row>
      Copy the code
    1. Set the offset between the fields by using :offset=n;
      <el-col :span="6" :offset="1"> 
      Copy the code

3. The Container layout

    1. If we want to quickly layout a class background layout, we can use the Container layout directly.
    • Is the external layout container;
    • Said head;
    • Said her feet;
    • Represents the subject;
    • Represents the sidebar;
    1. Layout method manual provides several kinds, we will use the most common one, class background mode:
         <el-header> header </el-header>
             <el-aside> aside </el-aside>
             <el-main> main </el-main>
         <el-footer> footer </el-footer>
      Copy the code

04. Basic component specification

    1. Pure theory, understanding of color, font, border and other specification requirements:
    • Color: primary color, auxiliary color, neutral color;
    • Font: font, size, line height;
    • Border: solid line, dotted line, rounded corner, projection;

05. Icon and Link text

1. The Icon Icon
    1. UI provides a very rich system of ICONS that can basically meet the requirements of all normal scenarios;
    1. In general, the specific use of labels to insert directly, of course, can also be inserted through buttons and links;

    <i class="el-icon-edit" style="margin-right:20px"></i>
    <el-button type="primary" class="el-icon-search"></el-button>
    Copy the code

2. The Link text
    1. Link text, which is a hyperlink, offers the following color schemes:
    <el-link type="primary"> </el-link> <el-link type="danger"> </el-link> <el-link type="success"> </el-link> <el-link Type ="warning"> link </el-link> <el-link type="info"> Link </el-link>Copy the code
    1. The disabled property allows links to be disabled; Hover can be closed with :underline=”false”;
    <el-link type="warning" disabled> </el-link> <el-link type="info" :underline="false"> Link </el-link>Copy the code
    1. Link text also supports the use of icon icon function;
    <el-link type="success" class="el-icon-edit"> link </el-link>Copy the code

6. The Button Button

    1. Like the Link text in the previous section, the Button has several fixed styles:
    <el-button type="primary"> button </el-button> <el-button type="danger"> button </el-button> <el-button type="primary" </el-button> <el-button type="warning"> </el-button> <el-button type="info"> </el-button>Copy the code
    1. Using plain, you can achieve hollowing out; With the disabled property, you can disable it.
    <el-button type="warning" plain> </el-button> <el-button type="info" disabled>Copy the code
    1. Use type=”text” to turn a button into a plain text button;
    <el-button type="text"> </el-button>Copy the code
    1. Use can set multiple buttons into a combination of buttons;
    <el-button-group> <el-button type="primary" class="el-icon-arrow-left"> </el-button> <el-button type="primary"> next < I class="el-icon-arrow-right"></i></el-button> </el-button-group>Copy the code
    1. Loading =”true”;
    <el-button type="primary" :loading="true">Copy the code
    1. Use attributes such as size=”small” to implement three sizes;
    <! -- size: medium/small/mini --> <el-button type="primary" size="samll"> </el-button>Copy the code

7. The Radio and the Checkbox

1. Radio click
    1. Common option boxes are as follows:
    <el-radio V-model ="sex" label="1"> male </el-radio> <el-radio V-model ="sex" label="2"> female </el-radio> data() {return {sex: '1'}}Copy the code

    PS: Here v-model and sex are bidirectional bound, label is equivalent to value, and the value consistent with sex is preferred;

    1. You can use the group option box to set bidirectional binding to the top, as follows:
    <el-radio-group V-model =" City "> <el-radio :label="1"> Beijing </el-radio> <el-radio :label="2"> Shanghai </el-radio> <el-radio :label="3"> </el-radio> </el-radio-group> data() {return {city: 1}}Copy the code

    PS: Disable Settings: disabled; Border setting: border;

    1. El-radio-button can be used to implement the button single option, size can set the size;
    <el-radio-button label="1"> </el-radio-button label >Copy the code

    PS: Group el-radio-button and set the size attribute. The value is medium, small, mini.

    1. A single box or group radio box has the change event, which can be triggered after the change.
    <el-radio-group V-model ="city" @change="radioChange"> <el-radio :label="1"> </el-radio> <el-radio :label="2"> <el-radio > <el-radio: 3"> </el-radio> </el-radio> Methods: {// method radioChange(res) {console.log(' result -- ', res); }}Copy the code
2. Check the Checkbox
    1. Similar to a single check box, check boxes are as follows:
    <el-checkbox-group V-model =" Checklist ">< el-checkbox label=" music "></el-checkbox> <el-checkbox label=" sports "></el-checkbox> <el-checkbox label=" computer "></el-checkbox> </el-checkbox-group> return {checklist: [' sports ', 'computer ']}Copy the code

    PS: single checkbox, such as protocol confirmation, directly use el-checkbox without group;

    1. Use: Max / :min, can select the maximum/minimum number of tick;
    <el-checkbox-group v-model="checklist" :max="2">
    Copy the code
    1. As with checkboxes, the el-checkbox-button style is supported;
    <el-checkbox-button label=" music "></el-checkbox-button>Copy the code
    1. Like radio, event supports change, as follows:
    <el-checkbox-group v-model="checklist" @change="radioChange">
    Copy the code

    PS: The rest is similar to the monochrome box, notice the difference between button style and normal style attributes;

08. Input box

    1. Basic Input Input box, with bidirectional binding;
    </el-input> data() {return {input: "}}Copy the code
    1. Use the Clearable attribute to provide an in-box clear button; Use show-password to implement the password box;
    < el-INPUT V-model ="input" placeholder=" clearable "></el-input> < EL-input V-model ="input" placeholder=" show-password></el-input>Copy the code
    1. Use the maxLength attribute to set the input limit;
    <el-input V-model ="input" placeholder=" maxLength ="6" show-word-limit></el-input>Copy the code
    1. Use prefix-icon to set the built-in prefix icon. Use suffix-icon to set the built-in suffix icon;
    <el-input placeholder=" please input content "prefix-icon="el-icon-search"></el-input> <el-input placeholder=" suffix-icon="el-icon-edit"></el-input>Copy the code

    Ps: The slot mode is supported

        <i slot="suffix" class="el-input__icon el-icon-date"></i>
    Copy the code
    1. Use type=”textarea” to set the input field to a text field;
    <el-input V-model ="input" placeholder=" type="textarea"></el-input>Copy the code

    Ps: Use the attribute autosize to automatically expand its height;

    1. use<template>Can realize compound input library;
        <template slot="prepend">http://</template>
        <template slot="append">.com</template>
    Copy the code

    Ps: As in the previous form, you can use size to set the size;

    1. The relevant information in the data list can be matched by input library activation or input.
    < el-autoComplete V-model ="autocomplete" placeholder=" Please input content ":fetch-suggestions="querySearch"></ el-autoComplete >Copy the code

    Ps: querySearch for details see Element UI documentation PS: events, input libraries have: focus, blur, select; Automatic completion: select, change;

09. InputNumber

    1. Basic InputNumber counter with bidirectional binding;
    <el-input-number v-model="inum"></el-input-number>
    data() {
      return {
          inum: 1
    Copy the code
    1. Use: Max / :min to limit maximum and minimum values, support change events;
    <el-input-number v-model="inum" @change="inputChange" :min="1" :max="10"></el-input-number>
    inputChange(value) {
    Copy the code

    Ps: Disable Disable. Set :step=1 to increase or decrease the step size; Set :precision=2 for decimal precision;

    <el-input-number v-model="inum" @change="inputChange" :step='1' :precision='2'></el-input-number>
    Copy the code
    1. Use controls-position to set the position of the add or subtract button.
    <el-input-number value="inum" controls-position="right"></el-input-number>
    Copy the code
    1. Event support: change, blur, FOUcs, method support: focus, SELECT (difference without callback)

10. Select selector

    1. Basic SELECT selector:
    <el-select V-model ="value" placeholder=" please select "> <el-option V-for ="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> data() { return { value: '', options: [ { value: 1, label: Value: 'Beijing'}, {2, label: 'Shanghai'}, {value: 3, label: 'guangzhou}]}}Copy the code
    1. There are two disabling options: 1. Set in el-select; 2. Set it in el-Option.
    <el-select V-model ="value" placeholder=" disabled "> <! - or - > < el - option: disabled = "item. The value = = 1" > < / el - option >Copy the code
    1. Use the Clearable attribute to clear the selected items. Multiple is used to implement multiple projects.
    <el-select v-model="value" placeholder="请选择" clearable multiple >
    Copy the code
    1. Using the Filterable attribute, perform an option search;
    <el-select V-model ="value" placeholder=" placeholder "placeholder=" filterable>Copy the code
    1. The corresponding attributes and events are basically similar to those before;
    <el-select v-model="value" placeholder=" placeholder "size="mini" @change="change">Copy the code

11. Cascader selector

    1. Basic Cascader selector:
    <el-cascader :options="options" v-model="value"> </el-cascader> data() { return { value: 1, options: [{ value: 1, label: "Beijing ", children: [{value: 11, label: 'Beijing grade 12'},{value: 12, label:' Beijing Grade 12'},{value: 13, label: 'Beijing Grade 12'}, children: [{value: 12, label:' Beijing Grade 12'},{value: 13, label: 'Beijing Grade 12'}, }]}}Copy the code
    1. The default is to expand the menu by click, or to hover;
    <el-cascader v-model="value"
            :props="{ expandTrigger: 'hover' }">
    Copy the code
    1. Use disabled and clearable to disable and clear, as with the Select selector;
    <el-cascader v-model="value"
            :options="options" clearable disabled>
    Copy the code
    1. Use :show-all-levels to restrict access to last-level content, set false;
    <el-cascader v-model="value"
    Copy the code
    1. Use :props to set the check box to multiple selections;
    <el-cascader v-model="value" :options="options" :show-all-levels='false' :props="props"></el-cascader> data() { return {  props: { multiple: true } } }Copy the code

12. Switch to Switch

    1. Basic usage
    <el-switch v-model="value"
      export default {
        data() {
          return {
              value: true
    Copy the code
    1. In addition to Boolean, it can also be String or Number;
    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ccc" active-value="100" nactive-value="0" @change="switchChange"></el-switch> data() { return { value: '0', }; }, methods: { switchChange(value) { console.log(value); }},Copy the code

13. The Slider sliding block

    1. Basic usage:
    <el-slider v-model="value"></el-slider>
    data() {
      return {
          value: 0
    Copy the code
    1. Hide text hints with :show-tooltip :format-tootip Implements custom formatting.
    <el-slider v-model="value" :show-tooltip="false"></el-slider> <el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider> methods: { formatTooltip(value) { return value / 100; }}Copy the code
    1. Use :step for discrete effects and show-stops for breakpoints.
    <el-slider v-model="value3" :step='10'></el-slider>
    <el-slider v-model="value3" :step='10' show-stops ></el-slider>
    Copy the code
    1. Show-input comes with an input box.
    <el-slider v-model="value" show-input></el-slider>
    Copy the code
    1. Use range to achieve range selection;
    <el-slider v-model="value" range :min='1' :max='10'></el-slider>
    value: [4, 6]
    Copy the code

14. TimePicker time selection

    1. Select a fixed point in time as follows:
    <el-time-select v-model="value" :picker-options= "{ start: '08:30', step: '00:15', end: }" placeholder=" placeholder time "> </el-time-select> data() {return {value: "}}Copy the code
    1. Select an arbitrary point in time as follows:
    <el-time-picker v-model="value1" arrow-control :picker-options= "{ selectableRange: Placeholder =" placeholder time "> </el-time-picker>Copy the code

    Ps: arrow-control enables arrow selection, while selectableRange limits the time range.

    1. Rich arbitrary time range, as follows:
    <el-time-picker V-model ="value2" is-range range-separator=' to 'start-placeholder=' start time' end-placeholder=' end time '> </el-time-picker>Copy the code

    Ps: is-range open rich arbitrary time range, other literal meaning; The ps: property method is similar to the previous component.

15. DatePicker Date selection

    1. Select a base date as follows:
    <el-date-picker V-model ="value" placeholder=" select date "></el-date-picker> data() {return {value: "}}Copy the code
    1. You can set a type property to set the value obtained:
    <el-date-picker V-model ="value" type='date' placeholder=" select date "></el-date-picker>Copy the code

    Ps: set type to datetime. You can obtain the date and time.

    1. Date selection for custom shortcut options, as follows:
    <el-date-picker V-model ="value" type="datetime" placeholder=" select date ":picker-options="getPicker"></el-date-picker> data() {return {value: ", // Attribute object name is custom getPicker: {// Shortcuts is fixed name, mark set shortcuts: [{text: 'Today ', onClick(picker) {picker.$emit('pick', new Date());}}, {text: 'yesterday ', onClick(picker) {const date = new date (); date.settime (date.gettime () -3600 * 1000 * 24); picker.$emit('pick', date); } }, { text: 'A week ago ', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } }] } } }Copy the code
    1. Select a range date as follows:
    <el-date-picker V-model ="value2" type='monthrange' range-separator=' to 'start-placeholder=' placeholder' end-placeholder=' placeholder '> </el-date-picker>Copy the code
    1. Select a date and format it as follows:
    <el-date-picker V-model ="value" type='datetime' placeholder=' placeholder 'format=" YYYy-MM-dd" :picker-options="getPicker"> </el-date-picker>Copy the code