使用这6个Vue加载动画库来降低我们网站的跳出率

作者：MattMaribojoc译者：FrontendXiaozhi来源：stackabuse洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。阻止人们离开我们网站的一种方法是添加视觉反馈，让他们知道我们的页面正在加载并且没有损坏。视觉反馈也能引起注意，因此等待时间似乎比静态屏幕要短得多。无论是添加微调动画还是添加实际的进度条，提供美观的视觉元素都可以提高网站的性能并改善访问者的体验。对于Vue开发人员，我们可以使用大量类似的库。在这篇文章中，我分享了我最喜欢的6个。1.VueSimpleSpinnergithub:https://dzwillia.github.io/vu...顾名思义，这是一个非常简单的组件，但仍然非常强大。VueSimpleSpinner提供可自定义的加载样式。使用道具，我们可以控制相应的样式：大小背景和前景色颜色速度标签文本等等...安装命令：npminstallvue-simple-spinner--save。然后，将其导入到组件中，在模板中声明，并更改所需的道具：importRadialProgressBarfrom'vue-radial-progress'exportdefault{data(){return{completedSteps:0,totalSteps:10}},components:{RadialProgressBar}}3.Vue加载覆盖github:https://github.com/ankurk91/v...VueLoadingOverlay是全屏加载组件的理想解决方案。这个库很有用，例如，如果应用程序包含某种仪表板并等待所有数据加载后再让用户点击。这个库的另一个有用的特性是，当加载时，用户点击掩码来取消加载并触发一个事件，我们可以用它来取消任何正在运行的任务。添加此功能后，用户可以自行决定何时加载和退出任务花费的时间过长。这意味着他们不必离开页面。安装命令：npminstall--savevue-loading-overlay下面是LoadingOverlaylibrary使用示例：4.VueProgressPathgithub地址：https://github.com/Akryum/vue...VueProgressPath是VueCore团队成员GuillaumeChau创建的最流行的加载库之一，也是我最喜欢使用的工具之一。使用SVG，VueProgressPath创建一个有形状的进度条。它带有几个内置形状，但最强大的功能是能够传入我们自己的SVG形状——这意味着无限的可能性。使用npmi--savevue-progress-path将其添加到您的项目中，然后使用import'vue-progress-path/dist/vue-progress-path.css'import将文件全局添加到您的src/main.js文件中VueProgressfrom'vue-progress-path'Vue.use(VueProgress,{//defaultShape:'circle',})现在让我们看看如何向组件添加进度路径。这个库还有一个非常好地方，不需要传递props来改变样式，只需要使用CSS代码来编辑样式：.vue-progress-pathpath{stroke-width:12;}.vue-progress-path.progress{stroke:red;}5.VueLoadingButtongithub地址：https://github.com/shwilliam/...VueLoadingButton是一种向用户显示正在加载内容的简单有效的方式。它所做的只是在单击按钮时添加一个滚轮动画。但是通过流畅的动画，它可以创造出使网站流行的无缝外观。安装：npminstall--savevue-loading-button示例：6.TBSkeletongithub地址：https://github.com/anthinking...TBSkeleton的体验非常好。然而，这需要相当繁琐的代码和合理的规划元素。我认为理解这一点的最好方法是写一个例子。首先，使用npminstall--savetb-skeleton安装。然后，将以下内容添加到src/main.js文件中。importskeletonfrom'tb-skeleton'import'tb-skeleton/dist/skeleton.css'Vue.use(skeleton)以下是来自TBSkeleton文档的示例骨架组件。从上面可以看出，如果要使用这个库，需要一定的时间和成本，但是可以用在一些对用户体验要求极佳的需求中。~完了，我洗碗了，我去洗碗了，下期见~代码部署后可能存在的bug无法实时知晓。之后为了解决这些bug，我花了很多时间在日志调试上。顺便给大家推荐一个好用的BUG监控工具Fundebug。原文：https://learnv.co/2020/02/6-v...交流有梦想，有干货，微信搜索【大招天下】关注这位还在洗碗的洗碗智慧清晨。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。