作者：Matt Maribojoc
译者：前端小智
起源：stackabuse

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

阻止人们来到咱们的网站的一种办法是增加视觉反馈，让他们晓得咱们的网页正在加载而不是坏了。 视觉反馈还吸引了人们的注意力，因而等待时间仿佛比动态屏幕要短得多。

无论是增加微调动画还是增加理论进度条，提供好看的视觉元素都能够改善网站的性能，也会让访问者体验更加的好。

对于Vue开发人员而言，有大量相似的库供咱们应用。

在本文中，分享 6 个我的最爱。

1. Vue Simple Spinner

github： https://dzwillia.github.io/vu...

顾名思义，这是一个非常简单的组件，但性能依然十分弱小。 Vue Simple Spinner提供了可定制加载款式。 应用 props，咱们能够管制对应的款式：

  • Size
  • Background and foreground colors
  • Speed
  • Label Text
  • Much more…

装置命令：

npm install vue-simple-spinner --save.

而后，将其导入到组件中，在模板中进行申明，而后更改所需的 props:

<template>   <vue-simple-spinner size="medium" /></template><script>import VueSimpleSpinner from 'vue-simple-spinner'export default {   components: {       VueSimpleSpinner   }}

成果如下：

2. Vue Radial Progress

github 地址：https://github.com/wyzantinc/...

如果你想要的是一个真正的进度条而不是旋转动画，Vue Radial Progress 一个十分棒的库。

Vue Radial Progress 能够在在进度栏中设置步骤数以及用户以后所处的步骤。 而后，依据实现的数量填充进度条的肯定百分比。

具备平滑的动画，可自定义的性能以及基于SVG的填充零碎，当您具备蕴含多个离散步骤的异步过程时，此库将十分弱小。

装置：

npm install --save vue-radial-progress

此外，该库应用组件插槽使圆内增加文本变得简略

<template>  <radial-progress-bar :diameter="200"                       :completed-steps="completedSteps"                       :total-steps="totalSteps">   <p>Total steps: {{ totalSteps }}</p>   <p>Completed steps: {{ completedSteps }}</p>  </radial-progress-bar></template><script>import RadialProgressBar from 'vue-radial-progress'export default {  data () {    return {      completedSteps: 0,      totalSteps: 10    }  },  components: {    RadialProgressBar  }}</script>

3.Vue Loading Overlay

github: https://github.com/ankurk91/v...

Vue Loading Overlay 是全屏加载组件的现实解决方案。 例如，如果应用程序蕴含某种仪表板，并且要等到所有数据加载结束后再让用户到处点击，则此库很有用。

这个库还有一个好用的个性就是加载时，用户点击遮罩，能够勾销加载，并触发一个事件，咱们能够应用该事件勾销正在运行的任何工作。

增加此性能，能够容许用户自行决定工作何时破费太长时间来加载和退出。 这意味着他们不用来到页面。

装置命令：

npm install --save vue-loading-overlay

上面是 Loading Overlay library 应用示例：

<template>    <div class="vld-parent">        <loading :active.sync="isLoading"         :can-cancel="true"         :on-cancel="onCancel"        :is-full-page="fullPage"></loading>                <label><input type="checkbox" v-model="fullPage">Full page?</label>        <button @click.prevent="doAjax">fetch Data</button>    </div></template><script>    // Import component    import Loading from 'vue-loading-overlay';    // Import stylesheet    import 'vue-loading-overlay/dist/vue-loading.css';        export default {        data() {            return {                isLoading: false,                fullPage: true            }        },        components: {            Loading        },        methods: {            doAjax() {                this.isLoading = true;                // simulate AJAX                setTimeout(() => {                  this.isLoading = false                },5000)            },            onCancel() {              console.log('User cancelled the loader.')            }        }    }</script>

4. Vue Progress Path

github 地址：https://github.com/Akryum/vue...

Vue Progress Path 是最风行的加载库之一。由 Vue Core团队成员Guillaume Chau创立，这也是我最喜爱应用的工具之一。

应用 SVG，Vue Progress Path 会创立成形的进度条。 它带有几个内置的形态，然而最弱小的性能是可能传递咱们本人的SVG形态-这意味着有限的可能性。

应用npm i --save vue-progress-path将其增加到我的项目中，而后应用将该文件全局增加到src/main.js文件中。

import 'vue-progress-path/dist/vue-progress-path.css'import VueProgress from 'vue-progress-path'Vue.use(VueProgress, {  // defaultShape: 'circle',})

当初，来看看如何向组件增加进度 path 。

<loading-progress  :progress="progress"  :indeterminate="indeterminate"  :counter-clockwise="counterClockwise"  :hide-background="hideBackground"  shape="semicircle"  size="64"/>

这个库还有一个很好中央，更改款式毋庸通过 props ，间接应用CSS代码来编辑款式：

.vue-progress-path path {  stroke-width: 12;}.vue-progress-path .progress {  stroke: red;}

5. Vue Loading Button

github 地址：https://github.com/shwilliam/...

Vue Loading Button 是一种简略而无效的形式，能够向用户显示某些内容正在加载。

它所做的只是在按钮被点击时增加一个转轮动画。但有了平滑的动画，它能够创立一个无缝的外观，使网站风行。

装置：

npm install --save vue-loading-button

示例：

<template>   <VueLoadingButton aria-label='Send message' /></template><script>import VueLoadingButton from 'vue-loading-button'export default {  components: {    VueLoadingButton,  }}</script>

6. TB Skeleton

github 地址：https://github.com/anthinking...

TBSkeleton 的体验是十分好的。然而，这须要相当繁琐的代码，也要正当的布局元素。

我认为了解这一点的最好办法就是写个例子。

首先，应用npm install --save tb-skeleton装置。 而后，将上面内容增加到src/main.js文件中。

import skeleton from 'tb-skeleton'import  'tb-skeleton/dist/skeleton.css'Vue.use(skeleton)

上面是 TBSkeleton 文档中的骨架组件示例。

<template>  <div>    <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">     <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>   </skeleton>  </div></template><script>  import {TbSkeleton,Skeleton} from 'tb-skeleton'  export default {    components: {      TbSkeleton,      Skeleton    }  }</script>

如上所见，如果要应用这个库，须要一些工夫老本，但在一些须要用户体验极好的需要里，能够应用它。

~ 完，我是刷碗智，去刷碗咯了，下期见~

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://learnv.co/2020/02/6-v...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。