加载指示器改善用户体验(用户体验)在任何应用程序网络或移动。 它告诉用户正在执行一个操作,结果将很快返回。

在 web 应用程序中,有两个主要事件需要加载器:

  • 网络请求,如导航到不同的页面或 AJAX 请求。
  • 当运行一个繁重的计算时。

本文将展示一些我们可以向我们的 Vue.js 应用程序添加加载器的方法。

加载指示器的类型

你在网站上使用的加载指示器的类型对用户有正面或负面的影响。 主要有两种指标可以在我们的网站上使用。

第一个是计数器。 它可以是一个进度条或计数器的形式,从零到百。 这是最有效的加载指示器类型,因为它给用户一个粗略的估计,当他们执行的行动将完成。

第二个是循环。 这种类型的加载器是某种正在运行的动画。 我们在网络上看到的最常见的例子是一个旋转器。

虽然计数器加载指示器最适合长时间运行的任务,循环指示器是完美的短时间运行的任务。

如果你为一个长时间运行的任务使用一个循环指示器,它会建立用户的焦虑,导致他们认为网站出错了,他们的行动失败了,并带着消极的想法离开。 因此,对于长时间运行的任务,应避免循环指示器。

这两种类型的加载指示器对于短期任务都适用,即使循环指示器要好得多。

开始吧

让我们创建一个新的项目。 我将使用 Vue CLI 来处理应用程序。 如果你不知道 Vue CLI 是什么,你可以看看这个。

  • vue create indicator

Cli 会问我们在我们的应用程序中想要使用什么技术,在这个演示中,我选择了路由器和 Vuex。 接下来,在应用程序安装其依赖项时,点击回车并等待。

我们还将安装 nprogress 作为加载指示器。 您可以使用您选择的任何加载指示器。

Nprogress 是一个附加在页面顶部的进度条

我们不会使用 npm 或纱线这一点,让我们把它直接从 CDN。

在创建的 Vue CLI 项目中,导航到 public / index. html 文件,并在结束 head 标记之前添加下面的代码片段。

<link href="https://unpkg.com/[email protected]/nprogress.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/nprogress.js"></script>

使用 nprogress

Nprogress 公开了一些 API 方法,但是对于本文,我们只对 start 和 done 方法感兴趣。 这些方法启动和停止进度条。

Nprogress 还将指出如何进行加载程序,虽然这可以手动决定,但我们将坚持使用默认行为进行演示。

使用路由器

当我们使用路由器为我们的网站添加一个进度条时,我们通常需要的功能是: 当用户导航到一个新页面时,加载程序开始在页面顶部滴答作响,向用户显示下一页的下载进度。

这就是我们想要的:

好消息是 Vue 路由器带有钩子,我们可以挂在上面,这样我们就可以这样做了。

打开 src / router. js 文件并用下面的代码替换默认导出。

const router = new Router({
  routes: [
      { path: '/', name: 'home', component: Home },
      { path: '/about', name: 'about', component: About }
  ]
})

router.beforeResolve((to, from, next) => {
  // If this isn't an initial page load.
  if (to.name) {
      // Start the route progress bar.
      NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  // Complete the animation of the route progress bar.
  NProgress.done()
})

export default router

当我们挂接到 beforeResolve 路由时,我们告诉路由器一旦发生页面请求就开始 nprogress。 每个钩子之后都会告诉路由器,当一个链接被完全评估后停止进度条,它不应该关心页面请求是否成功。

使用你的 HTTP 库

我们喜欢为应用程序添加进度条的另一部分是当用户发出 AJAX 请求时。

现在的大多数 HTTP 库都有一种中间件或拦截器,可以在请求或响应发生之前触发。 正因为如此,我们也可以连接到我们选择的图书馆。

我更喜欢使用 axios,他们称之为拦截器:

  • # for yarn
  • yarn add axios
  • # for npm
  • npm install --save axios

然后我们可以将轴承配置为这样工作。

// in HTTP.js
import axios from 'axios'

// create a new axios instance
const instance = axios.create({
  baseURL: '/api'
})

// before a request is made start the nprogress
instance.interceptors.request.use(config => {
  NProgress.start()
  return config
})

// before a response is returned stop nprogress
instance.interceptors.response.use(response => {
  NProgress.done()
  return response
})

export default instance

然后,您可以导入并使用上面的文件来处理您的连接,并在每次发出请求时获得一个进度条。

组件中的装载机

有时候我们不发出页面请求或 AJAX 请求。 这可能只是一个依赖于浏览器的动作,需要时间。

让我们创建一个自定义 DownloadButton 组件,它可以根据一些外部操作将其状态更改为加载状态。

该组件将只需要一个道具装载。

<template>
  <DownloadButton :loading="loading">Download</DownloadButton>
</template>

定义组件可能如下所示。

<template>
  <button class="Button" :disabled="loading">
      <svg v-if="loading" class="Button__Icon Button__Spinner" viewBox="...">
          <path d="..."/>
      </svg>
      <svg v-else class="Button__Icon" viewBox="0 0 20 20">
          <path d="..."/>
      </svg>
      <span v-if="!loading" class="Button__Content">
          <slot></slot>
      </span>
  </button>
</template>

<script>
export default {
  props: {
      loading: { type: Boolean }
  }
}
</script>

<style>
/* styles go here... duh! ;) */
</style>

这里有一个简单的例子。

可重用装载机的 hoc

我们可以为组件创建装载器作为包装器(HOCs) ,然后可以通过 props 修改其状态。

这些类型的加载器适用于不影响应用程序全局状态的组件,但是您仍然希望用户感觉到已经连接到了该操作。

一个简单的例子:

// This loader will add an overlay with the text of 'Loading...'
const Loader = {
  template: `
      <div class="{'is-loading': loading}">
          <slot/>
      </div>
  `,
  props: ['loading']
}

const Stats = {
  template: `
      <Loader :loading="updating">
      ...
      </Loader>
  `,
  props: ['updating']
}

const app = new Vue({
  template: `
  <div class="widget">
      <Stats :updating="fetchingStats"/>
      <Button @click="fetchingStats = true">
          Latest stats
      </Button>
  </div>
  `,
})

下面是一个例子:

异步 Vue 组件

Vue 的异步组件只允许您在需要时从服务器获取组件。 他们不是为最终用户提供他们可能永远不会使用的组件,而是只提供他们需要的东西。 您可以在官方文档中了解更多有关它们的信息。

Async 组件还提供了对加载和错误状态的本机支持,因此在这里不需要任何特殊配置。

const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  // show this component during load
  loading: LoadingComponent,
  // show this component if it fails to load
  error: ErrorComponent,
  // delay before showing the loading component
  delay: 200,
  // error if the component failed to loadin is allotted time in milliseconds default in Infinity
  timeout: 3000
})

要在这里使用异步组件的方法,您需要使用 Vue 路由器延迟加载。

总结

在这篇文章中,我们探索了一些在你的 Vue.js 应用程序中添加加载指示器的方法。