打造出色的用户体验：80行代码实现运行时Vue骨架屏🏆

2023-11-29 09:46:18

1. 理解骨架屏及其工作原理

骨架屏，又称占位屏或加载屏，是一种用于在内容加载之前向用户展示页面结构和布局的临时替代物。它通常使用简单的形状和颜色来模拟真实内容的外观，让用户在等待内容加载时能够快速了解页面的整体结构和内容分布。骨架屏可以有效减少用户在加载过程中的等待时间，提升用户体验。

2. 在Vue中实现运行时骨架屏

在Vue中实现运行时骨架屏，可以使用以下步骤：

安装必要的依赖包：

npm install vue-skeleton-loading

在main.js文件中引入依赖包：

import VueSkeletonLoading from 'vue-skeleton-loading'
Vue.use(VueSkeletonLoading)

在组件中使用骨架屏：

<template>
  <div>
    <skeleton-loading v-if="isLoading" width="100%" height="100%"></skeleton-loading>
    <div v-else>
      <!-- 真实内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    // 模拟异步请求
    setTimeout(() => {
      this.isLoading = false
    }, 1000)
  }
}
</script>

3. 自定义骨架屏样式

您可以通过修改CSS样式来自定义骨架屏的外观。例如，您可以更改骨架屏的颜色、形状、大小等。

<style>
.skeleton-loading {
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-loading-item {
  width: 100%;
  height: 20px;
  margin-bottom: 10px;
  background-color: #e0e0e0;
  border-radius: 4px;
}
</style>