当前位置：首页 > VUE

vue前端实现骨架屏

2026-02-21 21:20:03VUE

骨架屏的实现方式

在Vue中实现骨架屏通常有几种常见方法，包括使用CSS、第三方库或自定义组件。以下是具体实现方案：

使用纯CSS实现骨架屏

通过CSS动画和伪元素模拟加载状态，适合简单场景：

<template>
  <div class="skeleton-container">
    <div class="skeleton-item" v-for="i in 5" :key="i"></div>
  </div>
</template>

<style>
.skeleton-item {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 10px;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
</style>

使用第三方库

vue-skeleton-webpack-plugin 是专为Vue设计的解决方案：

vue前端实现骨架屏

安装插件：

npm install vue-skeleton-webpack-plugin --save-dev

创建骨架屏组件：

vue前端实现骨架屏

<!-- Skeleton.vue -->
<template>
<div class="skeleton-wrapper">
 <!-- 你的骨架屏结构 -->
</div>
</template>

配置vue.config.js：


const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = { configureWebpack: { plugins: [ new SkeletonWebpackPlugin({ webpackConfig: { entry: './src/skeleton.js' } }) ] } }


#### 动态切换组件

结合Vue的异步组件和加载状态：

```html
<template>
  <div>
    <Skeleton v-if="loading" />
    <ActualContent v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  async created() {
    await this.fetchData();
    this.loading = false;
  }
}
</script>

响应式骨架屏

针对不同数据结构的自适应方案：

<template>
  <div>
    <div v-for="item in skeletonConfig" :key="item.id" 
         :style="{ width: item.width, height: item.height }"
         class="skeleton-box">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    config: Array // 接收动态配置
  },
  computed: {
    skeletonConfig() {
      return this.config || defaultConfig;
    }
  }
}
</script>