如何为用 Vue.js 编写的 SPA 实现加载屏幕? [英] How to implement a loading screen for a SPA written in Vue.js?

问题描述

我是 Vue.js 的新手，来自 AngularJS 1.有没有人有关于如何实现加载屏幕的提示，比如 请稍等?

I am new to Vue.js, coming from AngularJS 1. Does anybody have tips on how to implement a loading screen such as PleaseWait?

推荐答案

我还创建了一个与 PleaseWait.js 集成的示例

I also created an example that integrated with PleaseWait.js

http://codepen.io/CodinCat/pen/ZeKxgK?editors=1010

由于 PleaseWait.js 直接操作真实的 DOM，代码变得有点棘手.我建议在 Vue.js 中重新实现这个库.Vue 确实有过渡:https://vuejs.org/v2/guide/transitions.html

Since PleaseWait.js manipulates real DOM directly, the code becomes a little bit tricky. I'd recommend to re-implement this library in Vue.js. Vue does have transitions: https://vuejs.org/v2/guide/transitions.html

你可以为它创建一个组件，然后使用 v-if 来隐藏/显示它

You can just create a component for it, and use v-if to hide/show it

<loading-screen v-if="isLoading"></loading-screen>

一个非常简单的例子:http://codepen.io/CodinCat/pen/MpmVMp

这篇关于如何为用 Vue.js 编写的 SPA 实现加载屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！