Vue加载中动画组件使用方法详解

Vue加载中动画组件是一种可以用来增强用户交互体验的组件。这个组件一般是在数据加载的时候使用，可以让用户知道此时正在加载数据，不会让用户误以为程序崩溃或者卡住了。本篇攻略将详细讲解Vue加载中动画组件的使用方法。

1. 安装和引入

首先我们需要安装该组件。在命令行中输入：

npm install vue-loading-overlay --save

成功之后，在需要使用的组件中引入：

import LoadingOverlay from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

2. 使用

接下来我们演示两个例子来说明如何应用该组件。

例子1

在这个例子中，我们将在数据加载中使用Vue加载中动画。首先，在模板中定义LoadingOverlay组件：

<loading-overlay :z-index="999" :active.sync="loading" text="正在加载数据……"></loading-overlay>

z-index可以设置组件的层级，loading可以控制组件的显示与隐藏，text则是显示在组件中央的文本内容。此时loading变量值为false，所以不会立即显示LoadingOverlay，等到数据开始加载的时候，将loading变量的值设为true即可显示LoadingOverlay。

data() {
    return {
        loading: false,
        items: []
    };
},
mounted() {
    this.loading = true;
    axios.get('https://jsonplaceholder.typicode.com/photos')
    .then(response => {
        this.items = response.data.slice(0, 10);
    })
    .catch(error => {
        console.error(error);
    })
    .finally(() => {
        this.loading = false;
    });
}

在这段代码中，使用axios异步获取数据，并将返回的结果仅保留前10个元素。加载数据时，将loading变量设为true显示LoadingOverlay，在数据加载完毕后，再将其设为false隐藏LoadingOverlay。

例子2

这个例子将更加简单，展示了如何在路由中使用Vue加载中动画。首先还是在模板中定义LoadingOverlay组件：

<loading-overlay :z-index="999" :active.sync="loading" text="正在加载……"></loading-overlay>
<router-view></router-view>

此时将loading变量设为true，可以显示LoadingOverlay。接着，我们在路由对象中定义beforeEach()钩子函数，该函数将在路由发生变化时执行。

import LoadingOverlay from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
import router from './router';

const app = new Vue({
    el: '#app',
    router,
    data() {
        return {
            loading: false
        }
    },
    components: {
        LoadingOverlay
    },
    beforeCreate() {
        this.$router.beforeEach((to, from, next) => {
            this.loading = true;
            next();
        });
        this.$router.afterEach(() => {
            this.loading = false;
        });
    }
});

在这段代码中，我们在beforeEach()和afterEach()钩子函数中分别将loading变量设为true和false，来控制LoadingOverlay的显示和隐藏。

总结

这篇攻略讲解了Vue加载中动画组件的使用方法，并通过两个例子演示了其具体应用。简单来说，我们可以通过<loading-overlay>组件来定义LoadingOverlay，通过修改active变量的值来控制该组件的显示和隐藏。如果仅需在路由中使用LoadingOverlay，则可以在路由钩子函数中控制LoadingOverlay的显示和隐藏。