当前位置：首页 > VUE

vue实现骨架屏

2026-01-19 04:25:37VUE

实现骨架屏的常见方法

在Vue中实现骨架屏（Skeleton Screen）通常有以下几种方式，可根据项目需求选择合适的方法：

使用CSS实现基础骨架屏

通过纯CSS编写骨架屏的样式，适用于简单场景：

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

<style>
.skeleton-container {
  width: 100%;
  padding: 20px;
}

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

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

使用第三方库vue-skeleton-webpack-plugin

专为Vue项目设计的骨架屏插件，可与webpack配合使用：

安装依赖：

vue实现骨架屏

npm install vue-skeleton-webpack-plugin

配置vue.config.js：

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

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

创建skeleton.js入口文件：

import Vue from 'vue';
import Skeleton from './Skeleton.vue';

export default new Vue({
  components: { Skeleton },
  template: '<Skeleton />'
});

结合路由实现按需加载

在路由配置中为特定路由添加骨架屏：

vue实现骨架屏

const routes = [
  {
    path: '/product',
    component: () => ({
      component: import('./Product.vue'),
      loading: ProductSkeleton // 骨架屏组件
    })
  }
]

使用v-skeleton-loader组件

vuetify框架提供的专用组件：

<template>
  <v-skeleton-loader
    type="card"
    :loading="loading"
  ></v-skeleton-loader>
</template>

动态数据驱动的骨架屏

根据实际数据结构生成匹配的骨架屏：

computed: {
  skeletonItems() {
    return this.expectedDataStructure.map(item => ({
      height: item.type === 'image' ? '150px' : '20px',
      width: item.width || '100%'
    }))
  }
}