在开发前端网页时，通常需要使用一些库来使得开发更加方便，其中 Vue.js 是一个较为流行的前端框架，而 npm 则是管理和分享这些库的平台。其中，vue-simple-loading 是一个用于实现网页加载时的显示动画的 npm 包，下面将为大家介绍它的使用方法。
安装
要使用 vue-simple-loading，需要先在项目中安装它。可以使用以下命令进行安装：
npm install vue-simple-loading --save
其中 --save 参数用于将该包添加到项目的依赖中。
引入
安装成功后，需要在 Vue.js 的入口文件中引入该包：
import Vue from 'vue'; import Loading from 'vue-simple-loading'; Vue.use(Loading);
在这个例子中，我们使用了 import 语句来引入 vue-simple-loading 这个包，并且通过 Vue.use() 方法进行了注册，以便在整个应用程序中使用该组件。
使用
vue-simple-loading 提供了一个非常简单的使用方法。只需要在你需要显示加载动画的地方添加一个 v-loading 属性：
<template> <div v-loading="visible"> <p>页面内容</p> </div> </template>
在这里，我们使用了一个 v-loading 属性来指定这个 div 元素是否需要展示加载动画。在 Vue.js 中，v-loading 属性会自动添加一个用于展示加载动画的组件，当该组件的属性变为 false 时，加载动画会自动停止。
我们可以在 Vue.js 实例中在 data 函数中指定一个 visible 属性，并在需要展示加载动画的时候将其设置为 true：
-- -------------------- ---- ------- ------ ------- - ------ - ------ - -------- ------ -- -- --------- - ------------ - ----- ------------- -- - ------------ - ------ -- ------ -- --展开代码
在这里，我们在 mounted 函数中将 visible 属性设置为 true，表示需要启动加载动画。在五秒钟后，我们使用一个计时器来将 visible 属性重新设置为 false，以停止加载动画。
可选配置
vue-simple-loading 还提供了几个可选的配置，以适应不同的需求。
Theme
使用 :theme 属性来指定加载动画的主题。vue-simple-loading 提供了两种不同的主题可供选择："default" 和 "spinner"。
<template> <div v-loading="visible" :theme="'default'"> <p>页面内容</p> </div> </template>
在这里，我们使用了 :theme="'default'" 将主题设置为默认主题。
Color
使用 :color 属性来指定加载动画的颜色。该属性应该是一个 CSS 颜色值。
<template> <div v-loading="visible" :color="'#ff0000'"> <p>页面内容</p> </div> </template>
在这里，我们使用了 :color="'#ff0000'" 将加载动画的颜色设置为红色。
Size
使用 :size 属性来指定加载动画的大小。该属性应该是一个数字，表示加载动画的半径，单位是像素。
<template> <div v-loading="visible" :size="50"> <p>页面内容</p> </div> </template>
在这里，我们使用了 :size="50" 将加载动画的半径设置为 50 像素。
示例代码
-- -------------------- ---- ------- ---------- ---- ------------------- ------------------ ------------------ ----------- ---- ---------------- ---------- ------------------ --------------------- ----------------------- ------ ------ ----------- -------- ------ --- ---- ------ ------ ------- ---- --------------------- ----------------- ------ ------- - ------ - ------ - -------- ------ -- -- --------- - ------------ - ----- ------------- -- - ------------ - ------ -- ------ -- -- --------- ------- -------- - -------- ----- - --------展开代码
上面的代码会在页面加载完成后，展示一个带有加载动画的 div 元素，并在五秒钟后自动停止加载动画。其中，使用了 "spinner" 主题、红色的颜色和 50 像素的大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8881e8991b448e6013
