I couldn’t sleep last night because I know that it’s over between us

preface

1 introduction

Common properties props

content-placeholders

Rounded ="false" : Animated ="true" : Centered ="false"Copy the code

content-placeholders-heading

// Header component properties // Whether image is required :img ="false"Copy the code

content-placeholders-text

// Text component attributes // text lines ="3"Copy the code

Style modification style

vue-content-placeholders

<style lang="scss"> $height: 40px; $border-radius: 8px; Placeholder {var - content-Placeholder {// banner &-img {height: $height * 8; border-radius: $border-radius; } &-heading {&__img {width: $height * 3; height: $height * 3; border-radius: $border-radius; } &__content { & > div { height: $height; border-radius: $border-radius; } -text {&__line {height: $height; border-radius: $border-radius; } } } </style>Copy the code

2 use

The installation

npm install vue-content-placeholders  --save
Copy the code

The global load

import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(VueContentPlaceholders)
Copy the code

Placeholder figure

<template>
  <div class="BasePlaceholder">
    <content-placeholders :rounded="true" :animated="true" :centered="false">
      <content-placeholders-img />
      <content-placeholders-heading :img="true" />
      <content-placeholders-text :lines="lines" />
    </content-placeholders>
  </div>
</template>

<script>
import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(VueContentPlaceholders)
export default {
  data() {
    return {
      lines: 4
    }
  }
}
</script>

<style lang="scss" scoped>
$height: 40px;
$border-radius: 8px;
.BasePlaceholder {
  /deep/ .vue-content-placeholders {
    &-img {
      height: $height * 8;
      border-radius: $border-radius;
    }
    &-heading {
      &__img {
        width: $height * 3;
        height: $height * 3;
        border-radius: $border-radius;
      }
      &__content {
        & > div {
          height: $height;
          border-radius: $border-radius;
        }
      }
    }
    &-text {
      &__line {
        height: $height;
        border-radius: $border-radius;
      }
    }
  }
}
</style>
Copy the code

3. Pay attention to

1. Out of the box, no need to notice

The end of the

Spring flowers, sunshine, all lovely, look carefully or you the most lovely ~

Xi xi xi ^_^

Refer to the link

  • Vue – content – placeholders document

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to