封装--自定义Ant骨架屏布局并实现相应功能

1.加载页面引入封装的骨架屏组件

<div v-if="isLoad">
  <article-skeleton></article-skeleton>
</div>
<div v-else>此处为加载完成后需要显示的内容</div>

import articleSkeleton from '@/components/common/articleSkeleton'

data () {
      return {
        isLoad: true
      }
    },
    //加载数据请求
     async loadArticles () {
     //此处具体请求数据省略
	     if (res.ret_code === 200) {
	     	this.isLoad = false
	     }
     }

2.articleSkeleton.vue页面

<template>
  <div class="skeletonBox">
<!--    <van-skeleton title avatar active :row="13" v-for="item in 5" :key="item" />-->
<!--    <a-skeleton active :avatar="SkeletonAvatarProps" :paragraph="SkeletonParagraphProps" :title="SkeletonTitleProps" v-for="item in 5" :key="item" />-->

    <div class="flow_item popup" v-for="item in 5" :key="item">
      <div class="interval"></div>
      <div>
        <div class="boxList">
          <div class="list_title">
            <div class="title_left fullWidth">
              <a class="list_titStyle articleName animationCommone" title=""></a>
              <span class="time_list artCreateTime animationCommone"></span>
              <div class="title_right">
                <span class="icon_font oneModal animationCommone"></span>
                <span class="icon_font twoModal animationCommone"></span>
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="cont_recomBox">
            <div class="contCom_left articleImgBg animationCommone"></div>
            <div type="contCom_right">
              <div class="cont_infoLimit">
                <div class="contentList animationCommone"></div>
                <div class="contentList animationCommone"></div>
                <div class="contentListLast animationCommone"></div>
              </div>
              <div type="articler_box">
                <div class="arti_info">
                  <span class="authorName animationCommone"></span>
                    <a class="authorInfo animationCommone"></a>
                  </div>
                  <div class="icon_box_click">
                    <div class="label-icon-count view-font-and-count animationCommone"></div>
                  <div class="label-icon-count like-font-and-count animationCommone"></div>
                  <div class="label-icon-count collect-font-and-count animationCommone"></div>
                  <div class="label-icon-count animationCommone"></div>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div class="interval"></div>
    </div>
  </div>
</template>

<script>
//因为只需要样式，所以只引入样式即可
  import '@/style/common/antd.min.css'
  export default {
    name: "articeSkeleton",
    data() {
      return {
        // isLoad: true,
        loading: true,
        listData: [],
        SkeletonAvatarProps:{
          size: 'large',
          shape:'square',
        },
        SkeletonParagraphProps:{
          rows: 11,
          width:[104,64,40,588,588,244,28,66,38,38,38,38],
        },
        SkeletonTitleProps:{
          width:'428px',
        }
      }
    },
    props: {
    },
    mounted() {
    }
  }
</script>
<style lang="scss" scoped>
  .skeletonBox {
    .list_title{
      margin-bottom: 18px;
    }
    .ant-skeleton{
      position: relative;
      padding: 24px 32px;
      border-bottom: 1px solid rgba(153,153,153,0.15);
    }
    .ant-skeleton.ant-skeleton-active .ant-skeleton-avatar{
      width:180px;
      height:120px;
      border-radius: 4px;
    }
    .animationCommone{
   	  //background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);--垂直效果
      background: linear-gradient(135deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);--左上角到右下角效果
      background-size: 400% 100%;
      -webkit-animation: ant-skeleton-loading 1.4s ease infinite;
      animation: ant-skeleton-loading 1.4s ease infinite;
    }
    .articleName{
      display: inline-block;
      width: 428px;
      height: 18px;
    }
    .artCreateTime{
      display: inline-block;
      width: 104px;
      height: 12px;
    }
    .oneModal{
      width: 64px;
      height: 16px;
    }
    .twoModal{
      width: 64px;
      height: 16px;
    }
    .articleImgBg{
      width: 180px;
      height: 120px;
      border-radius: 4px;
      margin-right: 18px;
    }
    /*.contCom_left, .cont_infoLimit{*/
    /*  float: left;*/
    /*}*/
    .cont_infoLimit{
      float: left;
    }
    .cont_infoLimit, .cont_infoLimit:hover{
      width: 580px;
    }
    .contentList{
      width: 100%;
      height: 16px;
      margin-bottom: 12px;
    }
    .contentListLast{
      width: 244px;
      height: 16px;
    }
    .authorName{
      display: inline-block;
      width: 28px;
      height: 16px;
    }
    .authorInfo{
      display: inline-block;
      width: 66px;
      height: 16px;
    }
    .label-icon-count{
      width: 38px;
      height: 16px;
    }
  }
</style>

3.效果图