❝

If you keep thinking about the trouble

It’s just gonna be more trouble

❞

preface

A devout Christian died of smoking and came to heaven to meet God.

“Oh God,” he said, “I love you so much that you didn’t give me a hint about my smoking and dying.”

God said: “I gave you how many hints ah, you did not find you often can not find your lighter!”I’m sure you got a hint from God

Anyway, it’s always a good idea to have a little snack

1 Tooltip

slot

Code snippet


getFirstElement() {

  const slots = this.$slots.default;

  if(! Array.isArray(slots))return null;

  let element = null;

  for (let index = 0; index < slots.length; index++) {

    if (slots[index] && slots[index].tag) {

      element = slots[index];

    };

  }

  return element;

}

Copy the code

Skills parsing

❝

There are two buttons but the one behind them is displayed. What the hell? It turns out that after iterating, the last tag overwrites the previous tag and notice that a slot without a tag is not an array so text cannot be used with tooltip

❞

tooltip

Code snippet

<el-tooltip placement="top">

  <div slot="content"> Multi-line message <br/> Second line message </div>

  <el-button>Top center</el-button>

</el-tooltip>

Copy the code
/ / JSX syntax

(

<transition

  name={ this.transition }

  onAfterLeave={ this.doDestroy }>

  <div

.

} >

    { this.$slots.content || this.content }

  </div>

</transition>)

)



Copy the code

Skills parsing

❝

The

tag can be wrapped on a line. JSX interpolation, render as HTML vUE interpolation, render as text, so can render as HTML? Yes, command V-HTML VUE raw HTML portal

❞




“In a world where you’re not“ “I couldn’t find any meaning“

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
  • Learn Vue tips with Element (7) – Button
  • Learn Vue tips with Element (8) — Link
  • Learn Vue tips with Element (9) — Radio
  • Learn Vue tips with Element (10) — Checkbox
  • Learn Vue tips with Element (11) — Input
  • Learn Vue tips with Element (12) — InputNumber
  • Learn Vue tips with Element (13) — Select
  • Learn Vue tips with Element (14) — Cascader
  • Learn Vue tips with Element (15) — Switch
  • Learn Vue tips with Element (16) – Slider
  • Learn Vue tips with Element (17) — TimePicker
  • Learn Vue tips with Element (18) — DatePicker
  • Learn Vue tips from Element (20) — Upload
  • Learn Vue tips with Element (21) — Rate
  • Follow Element to learn Vue tips (23) – Transfer
  • Learn Vue tips with Element (24) — Form
  • Learn Vue tips with Element (25) — Table
  • Learn Vue tips with Element (26) – Tag
  • Follow Element to learn Vue tips (27) — Progress
  • Learn Vue tips from Element (28) — Tree
  • Learn Vue tips with Element (29) — Pagination
  • Follow Element to learn Vue tips (31) — Avatar
  • Follow Element to learn Vue tips (33) — Loading
  • Learn Vue tips with Element (34) — Message
  • Learn Vue tips with Element (36) — Notification
  • Learn Vue tips with Element (37) – Menu
  • Learn Vue tips with Element (38) – Tabs
  • Learn Vue tips with Element (39) — Breadcrumb
  • Learn Vue tips with Element (41) – Dropdown
  • Follow Element for Vue tips (42) — Steps
  • Learn the Vue tip (43) with Element — Dialog