前端内容加载器

页面获取接口数据之前,用户等待过程加载一个DOM，提高用户体验

image.png

安装：npm install vue-content-loader --save

<template>
<section>
   <content-loader :height="700"
                    :width="401"
                    :speed="2"
                    primaryColor="#e8e8e8"
                    secondaryColor="#ecebeb"
                    v-if="type==='cards'">
      <rect x="0"
            y="13"
            rx="4"
            ry="4"
            width="100"
            height="50" />
      <rect x="160"
            y="13"
            rx="4"
            ry="4"
            width="100"
            height="50" />
      <rect x="300"
            y="13"
            rx="4"
            ry="4"
            width="100"
            height="50" />
      <rect x="0"
            y="70"
            rx="5"
            ry="5"
            width="400"
            height="400" />
      <rect x="0"
            y="480"
            rx="5"
            ry="5"
            width="400"
            height="400" />
    </content-loader>
    <content-loader :height="700"
                    :width="401"
                    :speed="2"
                    primaryColor="#e8e8e8"
                    secondaryColor="#ecebeb"
                    v-if="type==='lists'">
      <template v-for="(item,index) in 7">
        <circle cx="10"
                :cy="40*index+25"
                r="8"
                :key="index" />
        <rect x="25"
              :y="40*index+10"
              rx="5"
              ry="5"
              width="375"
              height="30"
              :key="index*2" />
      </template>
      <rect x="20"
            y="300"
            rx="5"
            ry="5"
            width="365"
            height="400" />
    </content-loader>
<section>
</template>
<script>
import { ContentLoader } from 'vue-content-loader'
export default {
  components: { ContentLoader}
</script>

type属性不同，加载出来的页面内容也不相同