Introduction to the

Element UI is a UI framework based on VUE, which develops a number of components based on VUE to facilitate rapid page development.

1. Install Element UI and create items through vue scaffolding

Vue init Webpack ElementCopy the code

2. Install ElementUI in vue scaffolding project

# 1. Download elementUi's dependencies NPM I element-uI-s # 2. Import elementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // Use elementUi vue. Use (elementui);Copy the code

3. Button component (example)

3.1 Default Style button

<el-row> <el-button> Default button </el-button> <el-button type="primary"> Main button </el-button> <el-button </el-button> <el-button type="info"> </el-button> <el-button type="warning"> <el-button type="danger"> </el-button> </el-row>Copy the code

3.2 Simple Buttons

<el-row> <el-button plain> <el-button type="primary" plain> <el-button > <el-button type="success" < EL-button > < EL-button type="info" plain </el-button> < EL-button type="warning" plain </el-button> <el-button type="danger" plain> </el-button> </el-row>Copy the code

3.3 Rounded Buttons

<el-row> <el-button round> <el-button type="primary" round> <el-button > <el-button type="success" <el-button > < EL-button type="info" round </el-button> <el-button type="warning" round <el-button type="danger" round> </el-button> </el-row>Copy the code

3.4 Icon Buttons

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
Copy the code

4. Detailed use of button components

Summary: One thing to note when using element UI related components in the future is that all components begin with an EL - component nameCopy the code

4.1 Creating a Button

<el-button> Default button </el-button>Copy the code

4.2 Using Button Properties

<el-button type="primary" attribute = attribute value > default button </el-button> <el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>Copy the code

4.3 Button Group Usage

<el-button type="primary" icon="el-icon-back"> </el-button> <el-button type="primary" </el-button> </el-button-group>Copy the code
  • In Element UI, all components areEl - Component nameMethod for naming
  • Properties used by components in element UIAttribute name = attribute value is directly written on the corresponding component label

5.Link Text Link component

5.1 Creation of text link components

<el-link> Default link </el-link>Copy the code

5.2 Use of properties of the text link component

<el-link target="_blank" href="http://www.baidu.com" > Default link </el-link> <el-link Type ="primary":underline="false"> </el-link> <el-link type="success" disabled> </el-link> <el-link type="info" Icon ="el-icon-platform-eleme"> Default link </el-link> <el-link type="warning"> Default link </el-link> <el-link Type ="danger"> default </el-link>Copy the code

The use of Layout components

Layout components in Element UI divide a page into rows, with each row divided into up to 24 columns (columns)Copy the code

6.1 Using the Layout Component

< el - row > < el - col: span = "8" > takes eight pieces < / el - col > < el - col: span = "8" > takes eight pieces < / el - col > < el - col: span = "8" > takes eight pieces < / el - col > < / el - row >Copy the code
  • In a layout component is made up ofrow 和 colcombination
  • In use to distinguishThe row attribute 和 Col attributes

6.2 Use of Attributes

  • Row attribute use

    Occupy four
    Take up eight
    Takes 3 copies
    Take up 9

Use of column attributes

<el-row> <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;" <div style="border: 1px blue solid;" </div></el-col> </el-row>Copy the code

7.Container Layout Container components

7.1 Creating a Layout Container

<el-container>
</el-container>
Copy the code

7.2 Child elements contained in containers

<el-header> : top column container. <el-aside> : side bar container. <el-main> : Primary region container. <el-footer> : bottom container.Copy the code

7.3 Nesting of Containers

<! -- Create a container --> <el-container> <! - the header - > < el - the header > < div > < h1 > I am a title < / h1 > < / div > < / el - the header > <! -- Container nested use --> <el-container> <! - value - > < el - value > < div > < h1 > I am menu < / h1 > < / div > < / el - value > <! - the main - > < el - the main > < div > < h1 > I am the center content < / h1 > < / div > < / el - the main > < / el - container > < el - footer > < div > < h1 > I am a footer < / h1 > < / div > < / el - footer > </el-container>Copy the code

7.4 Horizontal Container

<el-container direction="horizontal"> <! - the header - > < el - the header > < div > < h1 > I am a title < / h1 > < / div > < / el - the header > < el - container > <! - value - > < el - value > < div > < h1 > I am menu < / h1 > < / div > < / el - value > <! - the main - > < el - the main > < div > < h1 > I am the center content < / h1 > < / div > < / el - the main > < / el - container > < el - footer > < div > < h1 > I am a footer < / h1 > < / div > < / el - footer > </el-container>Copy the code

7.5 Vertical Container

<el-container direction="vertical"> <! - the header - > < el - the header > < div > < h1 > I am a title < / h1 > < / div > < / el - the header > < el - container > <! - value - > < el - value > < div > < h1 > I am menu < / h1 > < / div > < / el - value > <! - the main - > < el - the main > < div > < h1 > I am the center content < / h1 > < / div > < / el - the main > < / el - container > <! - footer - > < el - footer > < div > < h1 > I am a footer < / h1 > < / div > < / el - footer > < / el - container >Copy the code

8.Form related components

8.1 Radio Radio Button

Create Radio button

<! <el-radio V-model ="label" label=" male "> male </el-radio> <el-radio V-model ="label" label=" female "> female </el-radio> <script> Export default {name: "Radio", data(){return{label:' male '}}} </script>Copy the code

Use of the Radio button property

<el-radio V-model ="label" name="sex" disabled Label =" male "> male </el-radio> <el-radio V-model ="label" name="sex" border Size ="small" label=" female "> female </el-radio> <el-radio V-model ="label" border size="mini" label=" female "> female </el-radio> <el-radio V-model ="label" border size="medium" label=" female "> female </el-radio>Copy the code

The use of Radio events

<el-radio V-model ="label" @change="aa" name="sex" label=" male "> male </el-radio> <el-radio V-model ="label" @change=" AA" Name ="sex" border size="small" label=" female "> female </el-radio> <script> export default {name: "Radio", data(){return{label:' male '}}, methods:{aa(){console.log(this.label); } } } </script>Copy the code
  • The use of events is the same as the use of properties written directly on the corresponding component tag
  • Events must be used in a Vue time-bound manner such as @ event name = event handler (tied to the corresponding function in the Vue component)

9. Radio button group

<el-radio-group V-model ="radio"> <el-radio :label="3"> Alternative 3</el-radio> < EL-radio :label="6"> Alternative 6</el-radio> <el-radio :label="9"> Alternative 9</el-radio> </el-radio-group> <script> export default {name: "radio ", data() {return {radio: 6 } } } </script>Copy the code

10, Checkbox component

Create checkBox component

<el-checkbox V-model ="checked"> Beijing </el-checkbox> <el-checkbox V-model ="checked"> Shanghai </el-checkbox> <el-checkbox V - model = "checked" > tianjin < / el - the checkbox >Copy the code

10.2. Use of attributes

<el-checkbox V-model ="checked" disabled true-label=" Beijing "> Beijing </el-checkbox> <el-checkbox checked border <el-checkbox > <el-checkbox V-model ="checked" true label=" checked" > </el-checkbox>Copy the code

10.3. Event Usage

<el-checkbox @change="aa" V-model ="checked" true-label=" Shanghai "> <el-checkbox > <el-checkbox v-model="checked" @change=" AA" </el-checkbox> <script> export default {name: "Checkbox", data(){ return{ checked:true } }, methods:{ aa(){ console.log(this.checked); } } } </script>Copy the code

10.4. Use of check box groups

< el-checkbox-group@change ="bb" :min="1" V-model ="checkList"> <el-checkbox label=" Checkbox A"></el-checkbox> <el-checkbox Label =" Checkbox B"></el-checkbox> < el-Checkbox Label =" checkbox C"></ el-Checkbox >< el-Checkbox label=" disabled "disabled></ el-Checkbox > <el-checkbox label=" Select and disable "disabled></el-checkbox> </el-checkbox-group> <script> export default {name: "Checkbox", data(){ return{ checked:true, checkList:[], } }, methods:{ aa(){ console.log(this.checked); }, bb(){ console.log(this.checkList); } } } </script>Copy the code

11, Input box components

1. Create the Input component

<el-input v-model="name"></el-input>
<script>
    export default {
        name: "Input",
        data(){
            return {
                name:'xiaochen'
            }
        }
    }
</script>
Copy the code

2. Common attributes

<el-input v-model="name" disabled type="textarea"></el-input> <el-input v-model="price" :maxlength="10" show-word-limit : minLength ="5"></el-input> <el-input prefix-icon="el-icon-user-solid" placeholder=" please input user name "clearable V-model ="username"></el-input> <el-input suffix-icon="el-icon-star-off" placeholder=" please input password "show-password type="password" clearable v-model="password"></el-input> <script> export default { name: "Input", data() { return { restaurants: [], state1: '', state2: "', name: 'xiaochen, price: 0.0, the username:", "password:", "}; }, } </script>Copy the code

3. Event usage

<el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc"></el-input> <script> export  default { name: "Input", data() { return { restaurants: [], state1: '', state2: "', name: 'xiaochen, price: 0.0, the username:", "password:", "}; }, methods:{aaa(){console.log(' lost focus '); ; }, BBB (){console.log(" get focus "); }, CCC (value){console.log(" change :"+value); The elements themselves (){console.log; } } } </script>Copy the code

4. Use of methods

</h1> <el-input V-model ="username" ref="inputs"></el-input> <el-button @click="focusInputs">focus </el-button> <el-button @click="blurInputs">blur </el-button> <script> export default {name: "Input", data() {return{}}, methods:{focusInputs(){this.$refs.inputs. Focus (); }, // Call blurInputs(){this.$refs. elsiders.blur (); } } } </script>Copy the code
  • When using component methods, you need to add them to the corresponding componentRef =" Component alias"
  • Used directly when calling a methodThis.$refs. component alias. The method name ()

Note: In elementUi all components have attribute event and method attributes: Write directly on the corresponding component tag usage: Attribute name = attribute value ‘Mode event’ : write directly on the corresponding component tag usage: ‘@ event name = vUE event handler function method: 1. Use ref= component alias on the corresponding component label 2. By using this.$refs. Component alias. Method name ()