❝

You have to sneak it in

Everything is to be expected

❞

preface

This year, the object, use the sweethearts head Look at yourself, sending out the faint scent of a single dog head Very not easy these days about an WeChat head on a good girl, very not easy to wait until she came late, but just when she turned the moment, I spray a mouthful of water, quietly left back home, I with good brothers

  • Why is the woman’s photo so beautiful in wechat so ugly
  • Dude, wake up, it’s wechat, wechat. You mean it

It was just wechat

1 Avatar

addClass

 avatarClass() {

  const { size, icon, shape } = this;

  let classList = ['el-avatar'];



  if (size && typeof size === 'string') {

    classList.push(`el-avatar--${size}`);

  }



  if (icon) {

    classList.push('el-avatar--icon');

  }



  if (shape) {

    classList.push(`el-avatar--${shape}`);

  }



  return classList.join(' ');

}

Copy the code

Skills parsing

❝

Join (“) add mode: class=”el-avatar–small el-avatar–icon” El.classlist.add () jQuery: $(el).addClass() jQuery: class=”{‘el-avatar–small’: true}”

❞

srcSet

  • If A and C stand together, who will be taller?
  • A
  • No, C
  • Why?
  • Because the ABCD?

Code snippet

if (isImageExist && src) {

  return <img

    src={src}

.

    srcSet={srcSet}/>;

}

Copy the code

Skills parsing

❝

What about screens of different sizes? Screen fit, REM, VW, pictures? You can’t zoom in or out, can you? To do that? How does it fit?

❞ 

/ *

* 800px load middle. JPG

* 1400px loads big.jpg

* Small.jpg is loaded by default

* /

<img 

  src="small.jpg " 

  srcset="big.jpg 1440w, middle.jpg 800w" />

Copy the code

❝

The IMG element srcset attribute analyzes the portal

❞

object-fit

Do you feel elastic?

It’s not just skin that can be shiny and elastic, but pictures too!

if (isImageExist && src) {

  return <img

    src={src}

.

    style={{ 'object-fit': fit }}/>;

}

Copy the code

Skills parsing

❝

Natural: object-fit: none; Object-fit: fill; Cover state: object-fit: cover; There are many more interesting forms to unlock ^^ ^^ Object-Fit portal

❞




“When you’re around me“ “I have never envied anyone“

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