vue3实现骨架屏效果

前端

2023-12-15 15:17:30

Vue3骨架屏的介绍

在当今快节奏的数字世界中，用户期望网页加载速度快，而且体验良好。如果网页加载速度慢，用户可能会感到沮丧，甚至直接离开。骨架屏是一种加载技术，可以帮助改善网页的加载体验。

骨架屏是一种占位符，它在网页内容加载之前显示在页面上。骨架屏通常由简单的形状和颜色组成，例如矩形、圆形和线条。当网页内容加载完成后，骨架屏会消失，取而代之的是实际内容。

骨架屏有几个好处：

改善用户体验：骨架屏可以向用户显示网页正在加载，从而减少用户等待时间。这可以改善用户的体验，让他们在网页加载时不会感到沮丧。
提高网站性能：骨架屏可以帮助提高网站的性能。当网页内容加载完成后，骨架屏会立即消失，这可以减少页面渲染的时间。
提高网站美观：骨架屏可以帮助提高网站的美观。骨架屏通常由简单的形状和颜色组成，这可以使网页看起来更整洁、美观。

Vue3骨架屏的实现

现在，让我们来看看如何在Vue3中实现骨架屏。首先，我们需要创建一个新的Vue项目。您可以使用Vue CLI或其他Vue项目构建工具来创建项目。

接下来，我们需要在项目中安装骨架屏库。我们推荐使用vue-skeleton-loading库。这是一个轻量级的Vue骨架屏库，可以帮助您轻松实现骨架屏效果。

npm install --save vue-skeleton-loading

安装完成后，您就可以在Vue组件中使用vue-skeleton-loading库了。骨架屏通常使用template和style标签来实现。template标签定义骨架屏的结构，style标签定义骨架屏的样式。

以下是骨架屏的模板代码：

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

这个模板代码创建了一个骨架屏，其中包含三个骨架屏项目。您可以根据需要调整骨架屏项目的数量和样式。

以下是骨架屏的样式代码：

<style>
.skeleton {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-item {
  width: 200px;
  height: 200px;
  background-color: #efefef;
  margin: 10px;
}
</style>

这个样式代码为骨架屏设置了样式。您可以根据需要调整骨架屏项目的颜色、大小和间距。

最后，您需要在Vue组件中使用骨架屏组件。您可以将骨架屏组件放在任何需要显示骨架屏的地方。例如，您可以将骨架屏组件放在网页正文中，或者放在侧边栏中。

以下是使用骨架屏组件的代码：

<template>
  <div>
    <skeleton v-if="loading"></skeleton>
    <div v-else>
      <!-- 网页内容 -->
    </div>
  </div>
</template>

<script>
import Skeleton from 'vue-skeleton-loading'

export default {
  components: {
    Skeleton
  },
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 1000)
  }
}
</script>