vue实现骨架屏
实现骨架屏的常见方法
在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配合使用：
安装依赖：
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 />'
});结合路由实现按需加载
在路由配置中为特定路由添加骨架屏：
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%'
}))
}
}骨架屏的最佳实践
保持骨架屏结构与真实UI布局一致 控制动画效果避免过度闪烁 适当设置延迟避免快速切换 为移动端优化加载体验 提供无障碍访问支持
以上方法可根据项目复杂度和团队技术栈灵活选择，从简单CSS实现到完整工程化方案均可满足不同场景需求。
