qiucode.cn【秋码记录】首页加入骨架屏占位填充

npm install element-plus --save

//或者使用  yarn
yarn add element-plus

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

 <el-skeleton style="width: 100%"   :loading="loading" animated :count="10">
    <template #template>
      <el-row>
        <el-col :span="6">
          <el-skeleton-item
            variant="image"
            style="width: 200px; height: 150px; border-radius: 5px"
          />
        </el-col>

        <el-col :span="18">
          <el-row>
            <el-col>
              <el-skeleton-item variant="h3" />
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <el-skeleton-item variant="p" />
            </el-col>
            <el-col>
              <el-skeleton-item variant="p" />
            </el-col>

            <el-col>
              <el-skeleton-item variant="p" style="width: 65%" />
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="2">
              <el-skeleton-item
                variant="circle"
                style="width: 35px; height: 35px"
              />
            </el-col>
            <el-col :span="2" style="margin-top: 10px">
              <el-skeleton-item variant="text" />
            </el-col>
            <el-col :span="3" style="margin-top: 10px">
              <el-skeleton-item variant="text" />
            </el-col>
            <el-col :span="2" style="margin-top: 10px">
              <el-skeleton-item variant="text" />
            </el-col>
            <el-col :span="2" style="margin-top: 10px">
              <el-skeleton-item variant="text" />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
    <template #default>

      <article class="post-list contt blockimg" >
        <div class="entry-container">
          
          <span class="laid_title_l"></span>
          <div class="block-image feaimg">
            <a
              class="block-fea scrollLoading"
              href="https://qiucode.cn/article/168"
              title="听说了吗，秋码记录首页加入了骨架屏"
             
              >
              <i class="mask"></i
              ><span class="vodlist_top"
                ><em class="voddate voddate_year">前端</em></span
              ></a
            >
            <div class="entyr-icon ico-p">
              <i class="icon iconfont icon-tupian"></i>
            </div>
          </div>
          <header class="entry-header">
            <span class="entry-title">
              <span v-if="item.isFree==1" class="badge no-free">付费</span>
              <span class="badge yuanchuang" >原创</span>
              <a :href="'/article/'+item.id">听说了吗，秋码记录首页加入了骨架屏</a>
            </span>
          </header>
          <div class="entry-summary ss">
            <p>
             秋码记录首页加入了Element-plus的骨架屏，以增加用户体验度，在访问站点也不再那么缓慢了，虽说之前也还是很快的，之少不至于太慢。
            </p>
          </div>
          <div class="entry-meta">
            <a href="javacript:;">
              <img
                class="lazyload"
                src="/static/front/images/headimg/shangguanjiangbei.png"
                srcset="/static/front/images/headimg/shangguanjiangbei.png"
                height="25"
                width="25"
              />上官江北
            </a>
            <span class="separator">/</span>
            <a href="javascript:;">qiucode.cn,秋码记录</a>
            <span class="separator">/</span>
            <time :datetime="item.createAt" v-text="timeFormatFilter(item.createAt,'0')"></time>
            <span class="separator">/</span>168 阅读
          </div>
        </div>
      </article>

    </template>
  </el-skeleton>