❝

Before loneliness is confusion

After loneliness comes growth

❞

preface

Life is nothing but eating, sleeping and playing Hello world! What about the world of components? Button is certainly the founder

According to the – >

Turn – >

Pull – >

Open – >

Eat full, don’t hurry to wash the dishes!!

Thud! No time, I have to study, hahaha

1 Button

Dynamic class name

Stay right there. All right, position yourself

Do you think I have a chance?Don’t move! I believe you!

You’re a bad old man!!

Code snippet

<button

.

    class="el-button"

    :class="[

      type ? 'el-button--' + type : '',

      buttonSize ? 'el-button--' + buttonSize : '',

      {

        'is-disabled': buttonDisabled,

        'is-loading': loading,

        'is-plain': plain,

        'is-round': round,

        'is-circle': circle

      }

]. ""

  >

.

  </button>

Copy the code

Skills parsing

❝

Static class, written normally

Dynamic class, added:

What, you don’t know :class

Let’s go have a barbecue

Oo, so it is, ha ha

addClass-> is-disabled:true

removeClass-> is-disabled:false

toggleClass->

type ? ‘el-button–‘ + type : ”

Class tips, have you learned?

If you learn it, you should run away

❞

Short circuit calculation

Are you sure you’re not out of your mind?


Code snippet

buttonSize() {

  return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;

},

Copy the code

Skills parsing

❝

A | | b, a thinking, and then walk b, ha ha type judgment regular writing (a instanceof Object)? A.s considering: undefined short-circuit method (a | | {}). The size so ah, don’t be too smart, rare confused!

❞

Component events

Hey, buddy, do me a favor. Deliver the flowers

Beautiful woman, send you flower flowerWow, little brother, so handsome, so handsome!

No, I… , I

Nothing to be embarrassed about

This, this, this…

I promise

Little sample, dare you forget my birthday, huh!

Code snippet

methods: {

  handleClick(evt) {

    this.$emit('click', evt);

  }

}

Copy the code

Skills parsing

❝

Hey, $emit, send me the EVT dear, I received it, thank you see, there is nothing $can’t fix, remember, component 4 element property + event + method + slot

❞

2 ButtonGroup

CSS pseudo-classes

Behind every successful man, there is a woman

Behind every rich man, there is a gang of women

You are successful. What about rich people?

I look back, dude, a bunch of guys!!

Code snippet

<el-button-group>

  <el-button type="primary" icon="el-icon-edit"></el-button>

  <el-button type="primary" icon="el-icon-share"></el-button>

  <el-button type="primary" icon="el-icon-delete"></el-button>

</el-button-group>



{

  .el-button-group>.el-button:first-child {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

  }

  .el-button-group>.el-button:last-child {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

  }

  .el-button-group .el-button:not(:first-child):not(:last-child) {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

  }

}



Copy the code

Skills parsing

❝

First child first child

:last-child, last one

:not(:first-child):not(:last-child) : Not the first, not the last

How many are there??Can you guess whatSo, pick the middle one. Did you get it?

❞

“May you live half your life“


“Return still young!“

❝

I am a fish with seven seconds of memory

Take you on an amazing journey

❞

Refer to the link

  • The element’s official website
  • Element repository
  • Vue website
  • ES6 Tutorial

Review past

  • Follow Element to learn Vue tips (1) – Layout
  • Learn Vue tips with Element (2) — Container