使用这 6个Vue加载动画库来减小咱们网站的跳出率

时间 2021-05-14 标签 css 前端 vue git github 面试 npm 微信异步 ide

做者：Matt Maribojoc
译者：前端小智
来源：stackabuse

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

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及个人系列文章。前端

阻止人们离开咱们的网站的一种方法是添加视觉反馈，让他们知道咱们的网页正在加载而不是坏了。视觉反馈还吸引了人们的注意力，所以等待时间彷佛比静态屏幕要短得多。vue

不管是添加微调动画仍是添加实际进度条，提供美观的视觉元素均可以改善网站的性能，也会让访问者体验更加的好。git

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

在本文中，分享 6 个个人最爱。面试

1. Vue Simple Spinner

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

顾名思义，这是一个很是简单的组件，但功能仍然很是强大。 Vue Simple Spinner提供了可定制加载样式。使用 props，咱们能够控制对应的样式：微信

Size
Background and foreground colors
Speed
Label Text
Much more…

安装命令：异步

npm install vue-simple-spinner --save.

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

<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... 已收录，有一线大厂面试完整考点、资料以及个人系列文章。