介绍
VueJS Spinner 是一个 Vue.js 组件，用于显示加载指示器。这个组件提供了十多种不同类型的加载指示器，可以根据需要进行定制。这篇文章将教你如何使用 vuejs-spinner 组件来显示加载指示器。
安装
首先，你需要使用 npm 来安装 vuejs-spinner 包。在终端中运行以下命令：
npm install vuejs-spinner --save
使用
在你的 Vue.js 应用程序中使用 vuejs-spinner 组件非常简单。首先，在 Vue 组件中，导入 Spinner 组件：
import Spinner from 'vuejs-spinner';
接下来，在你的模板中使用 Spinner 组件：
<template>
<div>
<spinner :type="'ball-scale-ripple-multiple'" :color="'#135e96'" :size="'5rem'" />
</div>
</template>在上面的代码中，我们使用 ball-scale-ripple-multiple 样式的 Spinner 组件。你可以根据需要使用其他样式。在组件上，我们指定了三个 prop：
- type：指定 Spinner 样式的名称。
- color：指定 Spinner 的颜色。
- size：指定 Spinner 的大小。
样式选择
vuejs-spinner 提供了许多不同的样式，例如 audio, ball-8bits, ball-atom, ball-beat, ball-circus, ball-climbing-dot, ball-grid-beat, ball-grid-pulse, ball-newton-cradle, ball-pulse, ball-pulse-rise, ball-pulse-sync, ball-rotate, ball-running-dots, ball-scale, ball-scale-multiple, ball-scale-ripple, ball-scale-ripple-multiple, ball-spin, ball-spin-clockwise, ball-spin-clockwise-fade, ball-spin-clockwise-fade-rotating, ball-spin-fade, ball-spin-fade-rotating, ball-spin-rotate, ball-square-clockwise-spin, ball-square-spin, ball-triangle-path, ball-zig-zag, ball-zig-zag-deflect, cube-transition, fire, line-scale, line-scale-party, line-scale-pulse-out, line-scale-pulse-out-rapid, line-spin-clockwise-fade, line-spin-clockwise-fade-rotating, line-spin-fade, pacman, square-jelly-box, square-loader, triangle-skew-spin。
示例代码
下面是一个完整的 Vue.js 组件，它使用 vuejs-spinner 包来显示加载指示器。在组件中，我们定义了两个状态：isLoading，用于指示数据是否正在加载，以及 post，用于存储从服务器获取的帖子。
-- -------------------- ---- -------
----------
-----
---- -----------------
-------- ------------------------------------ ------------------ -------------- --
------
---- -------
---- ----------- -- ----- ---------------
------ ---------- -------
----- --------- ------
------
------
------
-----------
--------
------ ------- ---- ----------------
------ ------- -
----------- -
--------
--
------ -
------ -
---------- -----
----- ---
--
--
----- --------- -
--------- - ----- -----------------
-------------- - ------
--
-------- -
----- ----------- -
----- -------- - ----- -------------------------------------------------------------
----- ---- - ----- ----------------
------ -----
--
--
--
---------
------ -------
-- ------------ --
--------在上面的代码中，我们使用 ball-scale-ripple-multiple 样式的 Spinner 组件，并在 isLoading 属性为 true 时显示 Spinner。在组件的 mounted 钩子中，我们使用 fetchData 方法从服务器获取帖子，并将其存储在 post 属性中。一旦 post 属性被设置，isLoading 属性就会被设置为 false，停止显示 Spinner。
总结
在这篇文章中，我们学习了如何使用 vuejs-spinner 组件来显示加载指示器。我们看到了如何根据需要选择不同的样式，以及如何根据需要调整 Spinner 的颜色和大小。这个组件是一个非常有用的工具，可以帮助我们在我们的 Vue.js 应用程序中添加一些视觉反馈，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e0fb81d47349e53ce7