❝

Or get strong and change the world

Or stay the one who gets hurt

❞

preface

A farmer was passing by a river. His axe fell into the river and hit the river god.

The river god said, “I have a gold axe and a silver axe. Which one is yours?

The farmer said, “I fell into the river with a rusty axe

Moved by the farmer’s honesty, the river God gave him both axes

The farmer went home happily and looked at the two axes carefully. Suddenly he was dumbfounded. He found that one was a full axe and one was a very axe

This TM is bought on PDD!!

Have you had any shopping experience? How can you find the right product? Are you ready to eat dirt? What are you waiting for? Let’s go!

1 Input

Synthetic events

Single machine, double machine, better to eat chicken left hold up, right hold up, better to drink pesticides together


Code snippet

<input

  @compositionstart="handleCompositionStart"

  @compositionupdate="handleCompositionUpdate"

  @compositionend="handleCompositionEnd"

>

Copy the code

Skills parsing

❝

General events: Click, double click, left swipe, right swipe

Text composition events are rare!

Oh, that’s a pretty good move, isn’t it Text synthesis system portal

❞

2 migrating

Virtual DOM

Have you ever broken a screen? That would be a treatThen there was cell phone film, then there was toughened film, then there was broken with eyes closed

Mom, I broke my phone. I think I can get a new one “Out with the old, in with the new“

Code snippet

mounted() {

.

  const { props = {}, events = {} } = this.getMigratingConfig();

  const { data, componentOptions } = this.$vnode;

  const definedProps = data.attrs || {};

  const definedEvents = componentOptions.listeners || {};

.

}

Copy the code

Skills parsing

❝

Is the real DOM hard to use?

It works. It works too well. That’s why it doesn’t work

How to speak?

The screen is clearer than the film, but it costs too much to fix! So using VNodes, which are essentially objects, to describe the real DOM, is much cheaper to manipulate

If you’re rich, forget it Virtual DOM portal

❞

3 calcTextareaHeight

Style operation

Remember that thief?

Stole that box, other people’s husband also silly silly don’t know!Sure enough, one-time packing operation, save time and effort

Code snippet

function calculateNodeStyling(targetElement) {

  const style = window.getComputedStyle(targetElement)

  const boxSizing = style.getPropertyValue('box-sizing')

  const paddingSize = (

    parseFloat(style.getPropertyValue('padding-bottom')) +

    parseFloat(style.getPropertyValue('padding-top'))

  )

.

}

Copy the code
export default function calcTextareaHeight(

  targetElement,

  minRows = 1,

  maxRows = null

) {

  if(! hiddenTextarea) {

    hiddenTextarea = document.createElement('textarea');

    document.body.appendChild(hiddenTextarea);

  }



  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);

.

}

Copy the code
calcIconOffset(place) {

  if (this.$slots[pendant]) {

    el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;

  } else {

    el.removeAttribute('style');

  }

}

Copy the code

Skills parsing

❝

El.style.left el.style.top el.style.paddingleft Try window.getComputedStyle(el) el.setAttribute(‘style’, style) el.removeAttribute(‘style’)

❞

4 merge

Object extension

Has the post-00s generation started dating?

As a 90-year-old, have you had enough dog food?Not enough? I’ll give you a few more!

Code snippet

export default function(target) {

  for (let i = 1, j = arguments.length; i < j; i++) {

    let source = arguments[i] || {};

    for (let prop in source) {

      if (source.hasOwnProperty(prop)) {

        let value = source[prop];

        if(value ! == undefined) {

          target[prop] = value;

        }

      }

    }

  }



  return target;

}

Copy the code
textareaStyle() {

  return merge({}, this.textareaCalcStyle, { resize: this.resize });

},

Copy the code

Skills parsing

❝

Freeze sets object. freeze sets object. freeze sets object. assign () {… A} Object copy portal

❞

“Some people are destined to leave from the beginning“ “I would have waited my whole life for him to return“

❝

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