❝

No matter how dark the night

The dawn always comes

❞

preface

One frog, one mouth, two ears, Four legs Two frogs, two mouths, four ears, eight legs Three frogs,… —————————————————— one little sheep, two little sheep, three little sheep, four little sheep, five little sheep…

Get up, get up, get up, get ready to go!

1 InputNumber

Locate the layout

  • Even if you are an inline box, even if you no matter how overflow, I want to put where where, after all, I am positioning
  • Great positioning.
  • If I go inline, I’ll go inline. If I go inline, I’ll go inline. If I go inline, I’ll go inline.

Code snippet

Skills parsing

❝

The same DOM structure, according to different styles, display different interface left and right :0; top:0 | right:0; Top :0 right:0; top:0 | right:0; Bottom: How to play it? Try line-height Bloodline portal

❞

Native events

Countdown, 10,9,8,7… Why didn’t I click? Why didn’t I click? Why didn’t I click? Finally got this rolls Royce WTF, 28??


Code snippet

<el-input

.

  @keydown.up.native.prevent="increase"

  @keydown.down.native.prevent="decrease"

  @blur="handleBlur"

  @focus="handleFocus"

  @input="handleInput"

  @change="handleInputChange">

</el-input>

Copy the code

Skills parsing

❝

$emit,$on @click. Native DOM event ($emit,$on @click. Vue event system portal

❞

Digital precision

  • Please keep integers
  • Please keep two decimal places
  • Please keep three significant digits

Have you ever been stumped by the questions above? Anyway, I didn’t care at that time. I handed in the blank paper


Code snippet

toPrecision(num, precision) {

.

  return parseFloat(

    Math.round(num*Math.pow(10, precision))/ 

    Math.pow(10, precision)

  );

}

Copy the code

Skills parsing

❝

ToFixed (12.342).tofixed (2) // 12.34 significant digits, Number.toprecision (12.345).toprecision (4) // 12.35 Next time don’t need to cover the exam paper

❞

2 focus

With the reference

Yue, do you remember? The girl with the wechat QR code

You can’t add people to wechat for nothing

It would be a shame not to have dinner or a movie or something

Recently, “eight Hundred” to be released, grab tickets to go, hee hee!

Code snippet

export default function(ref) {

  return {

    methods: {

      focus() {

        this.$refs[ref].focus()

      }

    }

  }

}

Copy the code

Skills parsing

❝

To add wechat, you must buy a ticket first

Have you bought your ticket yet?

Passing ref fires the component’s FOCU event

Come on, first come, first served, hee hee hee!

❞

3 repeat-click

Custom instruction

Waiter, can you plug it in?

Last time I went to dinner, I was looking for a place to crawl

Isn’t it just a charge?

Since there is no charging service in the store, we can bring our own charging bank to charge the battery-_ -

Code snippet

<span

  class="el-input-number__decrease"

  role="button"

  v-if="controls"

  v-repeat-click="decrease"

.

</span>

Copy the code
export default {

  bind(el, binding, vnode) {

.

  }

};

Copy the code

Skills parsing

❝

If you don’t have this instruction, you can create your own. V-xx is the instruction. V-repeat -click is literally the instruction

❞

Long press event

Who says long press events are unique to cell phones? Take a look at this example, you can still press on the keyboard!

Code snippet

export default {

  bind(el, binding, vnode) {

    let interval = null;

    let startTime;

    const handler = () => vnode.context[binding.expression].apply();

    const clear = () => {

      if (Date.now() - startTime < 100) {

        handler();

      }

      clearInterval(interval);

      interval = null;

    };



    on(el, 'mousedown', (e) => {

      if(e.button ! = = 0)return;

      startTime = Date.now();

      once(document, 'mouseup', clear);

      clearInterval(interval);

      interval = setInterval(handler, 100);

    });

  }

};

Copy the code

Skills parsing

❝

Click the mouse, every 100ms repeat a hand speed party, direct processing, clear repeated fun, slowly press, repeat again and again if tired, raise your fingers, the end

❞

“I always think“ “He’s here with me“

❝

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