egoist / vue-content-loader

SVG component to create placeholder loading, like Facebook cards loading.

Home Page:https://create-content-loader.now.sh/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

After using Vue to package the project, a white screen appears

lang1427 opened this issue · comments

After using Vue to package the project, a white screen appears

部分代码片段:

 <div class="recmend-songlist">
    <div class="clearfix">
      <span class="fl title">推荐歌单</span>
      <span class="fr more">歌单广场</span>
    </div>
    <template v-if="songlist.length!=0">
      <grid-view :cols="3" :v-margin="8">
        <div
          v-for="item of songlist"
          :key="item.id"
          class="song-list-item"
          @click="goSongSheet(item.id)"
        >
          <span class="play-count">
            <i class="fa-play"></i>
            {{ item.playCount | finalPlayCount }}
          </span>
          <img v-lazy="item.picUrl" alt />
          <p class="name">{{ item.name }}</p>
        </div>
      </grid-view>
    </template>
    <ContentLoader v-else :speed="1" :height=350>
      <rect x="5" y="0" rx="0" ry="0" width="120" height="100" />
      <rect x="5" y="110" rx="0" ry="0" width="120" height="20" />
      <rect x="135" y="0" rx="0" ry="0" width="120" height="100" />
      <rect x="135" y="110" rx="0" ry="0" width="120" height="20" />
      <rect x="265" y="0" rx="0" ry="0" width="120" height="100" />
      <rect x="265" y="110" rx="0" ry="0" width="120" height="20" />
      <rect x="5" y="150" rx="0" ry="0" width="120" height="100" />
      <rect x="5" y="260" rx="0" ry="0" width="120" height="20" />
      <rect x="135" y="150" rx="0" ry="0" width="120" height="100" />
      <rect x="135" y="260" rx="0" ry="0" width="120" height="20" />
      <rect x="265" y="150" rx="0" ry="0" width="120" height="100" />
      <rect x="265" y="260" rx="0" ry="0" width="120" height="20" />
    </ContentLoader>
  </div>

The development environment is normal, and the screen will be white after the packaging line

Online address