npm 包 vue-loading2 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要为页面添加 loading 效果，以让用户知道正在处理中。而 vue-loading2 就是一个基于 Vue.js 的 loading 指令，可以帮助我们轻松实现页面 loading 效果。

安装

在使用 vue-loading2 之前，我们需要先安装。

npm install vue-loading2 --save

使用指南

全局引入

可以在 Vue 的全局配置中引入 vue-loading2，这样就可以在任何组件中使用它。

import Vue from 'vue'
import VueLoading from 'vue-loading2'

Vue.use(VueLoading, {
  /* 配置项 */
})

局部引入

如果你只需要在单个组件中使用 vue-loading2，可以在组件中进行局部引入。

import { VueLoading } from 'vue-loading2'

export default {
  components: {
    VueLoading
  }
}

指令

在模板中使用 v-loading 指令即可。指令可以绑定布尔值，表明 loading 是否出现。

<button v-loading="isLoading">Click me</button>

上述代码中，isLoading 可以是 true 或 false，指令绑定的值为真时，就会显示 loading 效果。

配置

除了全局或局部引入，我们还可以配置一些参数来改变 vue-loading2 的行为。

以下是一些常见的配置项：

useBgColor：是否使用背景色，默认为 true
bgColor：背景色（16 进制或 RGB），默认为 #fff
isFullPage：是否全屏展示 loading 效果，默认为 false
text：加载中显示的文本，默认为 Loading...

示例代码：

Vue.use(VueLoading, {
  useBgColor: false,
  bgColor: '#000',
  isFullPage: true,
  text: 'Loading......'
})

实例

下面我们演示一个示例，在一个 Vue 组件中使用 v-loading 指令。

-- -------------------- ---- -------
----------
  -----
    ------- --------------------- -------------
    ----
      --- ----------- -- ----- ----------------- ---------- -------
    -----
    ---- ----------------------------
  ------
-----------

--------
  ------ ----- ---- -------

  ------ ------- -
    ------ -
      ------ -
        ----- ---
        ---------- -----
      -
    --
    -------- -
      --------- -
        -------------- - ----
        ---------------------------------------------------------------- -- -
          ------------- -- -
            --------- - --------
            -------------- - -----
          -- -----
        --
      -
    -
  -
---------

上述代码中，我们先定义了一个按钮，当用户点击该按钮时，会通过 axios 请求数据。在请求数据期间，我们把 isLoading 的值设为 true，从而在页面上显示 loading 效果。当请求数据返回后，我们又把 isLoading 的值设置为 false，从而隐藏 loading 效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600563ea81e8991b448e13a1