@TOC

Let’s start with ElementUi

For those of you familiar with ElenmetUi, the plugin library provides a set of common front-end control components. The content is very rich:

  1. Base column: Used for macro layout
  2. Form: Various controls for a Form
  3. Data column: control for visual display of Data
  4. Notice bar: friendly interactive reminder control
  5. Navigation bar: a layout in its own right
  6. Others column: Some bits and pieces of useful components

The installation of ElementUi

Installation:

1. NPM is recommended for installation, which can work better with webPack packaging tool. Link rel=”stylesheet” href=”unpkg.com/element-ui/… “NPM I element-ui-s 2. Import component library script SRC =”unpkg.com/element-ui/…”

Theme colors

The official website has a detailed explanation, I will not repeat it here

Built-in transition animation

This plug-in is more commonly used in actual combat

component

The component types are rich and the content meets your daily development needs

Detailed control state, daily development can almost meet:

I recommend the use of controls

1. Upload Upload control

The type of display supported by this control can be self-regulated, but there are some drawbacks. There are many solutions on the web, such as using the pre-upload component and discarding the action. Apart from these, this control is very easy to use and user feedback is good

2. Form controls

(1) Commonly used date and time pickers:

ElementUi provides an aesthetically pleasing Ui style as shown below:

** Note that if you really want to use forms, you need to add form controls. The following figure code: **Copy the code
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="Approver">
    <el-input v-model="formInline.user" placeholder="Approver"></el-input>
  </el-form-item>
  <el-form-item label="Active area">
    <el-select v-model="formInline.region" placeholder="Active area">
      <el-option label="Zone one" value="shanghai"></el-option>
      <el-option label="Area two" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit"< / > query el - button > < / el - form - item > < / el - form > < script >export default {
    data() {
      return {
        formInline: {
          user: ' ',
          region: ' '
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit! ');
      }
    }
  }
</script>
Copy the code

Author’s experience

ElementUi is a great plugin library if you don’t modify the content of the control, such as the style, etc. If you need to modify it, you can only customize it according to the parameters and methods provided under the control. However, some parameters displayed on the official website will not work. And can modify the content is not a lot, the control may have its own background color, if you need to modify it is a headache, so this plug-in has advantages and disadvantages.

That’s it. Thank you