每天学习一个vue插件(15)——vue-content-placeholders

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

前言

1 介绍

常用属性 props

content-placeholders

// 根组件属性
// 圆角 动画 居中
:rounded="false" 
:animated="true" 
:centered="false"

content-placeholders-heading

// 头部组件属性
// 是否需要图片
:img ="false"

content-placeholders-text

// 文本组件属性
// 文本行数
:lines ="3"

样式改造 style

vue-content-placeholders

<style lang="scss">
$height: 40px;
$border-radius: 8px;

.vue-content-placeholders {
  // 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>

2 使用

安装

npm install vue-content-placeholders  --save

全局加载

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

Vue.use(VueContentPlaceholders)

占位图

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

3.注意

1.开箱即用，无需注意

尾声

春暖花开，阳光明媚，万物可爱，仔细瞧瞧还是你最可爱~

嘻嘻嘻 ^_^

参考链接

• vue-content-placeholders 文档

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize
• 每天学习一个vue插件(12)——vue-fullpage
• 每天学习一个vue插件(13)——html2canvas
• 每天学习一个vue插件(14)——vue-pull-to