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

• 2. 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

• 3. 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

• 2. 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

• 3. Use type=”text” to turn a button into a plain text button;

  <el-button type="text"> </el-button>Copy the code

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

• 5. Loading =”true”;

  <el-button type="primary" :loading="true">Copy the code

• 6. 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;

• 2. 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;

• 3. 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.

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

• 2. Use: Max / :min, can select the maximum/minimum number of tick;

  <el-checkbox-group v-model="checklist" :max="2">
  Copy the code

• 3. As with checkboxes, the el-checkbox-button style is supported;

  <el-checkbox-button label=" music "></el-checkbox-button>Copy the code

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

• 2. 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

• 3. 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

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

  <el-input>
      <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  Copy the code

• 5. 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;

• 6. use<template>Can realize compound input library;

  <el-input>
      <template slot="prepend">http://</template>
      <template slot="append">.com</template>
  </el-input>
  Copy the code

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

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

• 2. 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) {
     console.log(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

• 3. 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

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

• 2. 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

• 3. 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

• 4. Using the Filterable attribute, perform an option search;

  <el-select V-model ="value" placeholder=" placeholder "placeholder=" filterable>Copy the code

• 5. 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

• 2. The default is to expand the menu by click, or to hover;

  <el-cascader v-model="value"
          :options="options"
          :props="{ expandTrigger: 'hover' }">
  </el-cascader>
  Copy the code

• 3. Use disabled and clearable to disable and clear, as with the Select selector;

  <el-cascader v-model="value"
          :options="options" clearable disabled>
  </el-cascader>
  Copy the code

• 4. Use :show-all-levels to restrict access to last-level content, set false;

  <el-cascader v-model="value"
          :options="options"
          :show-all-levels="false">
  </el-cascader>
  Copy the code

• 5. 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"
      active-color="#13ce66"
      inactive-color="#ff4949">
  </el-switch>
  
  <script>
    export default {
      data() {
        return {
            value: true
        }
      }
    };
  </script>
  Copy the code

• 2. 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

• 2. 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

• 3. 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

• 4. Show-input comes with an input box.

  <el-slider v-model="value" show-input></el-slider>
  Copy the code

• 5. 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

• 2. 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.

• 3. 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

• 2. 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.

• 3. 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

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

• 5. 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