Vue—VueWait详解

目录

一、概述

二、引入vue-wait组件

三、常见应用

四、拓展

---

一、概述

VueWait是一个复杂的装载器和进度管理组件，常用于Vue、Vuex和Nuxt。VueWait可以帮助管理页面上的多个加载状态，状态之间不会有任何冲突。

实现思路：通过管理具有多个加载状态的数组(或者Vuex存储)，让内置加载程序组件侦听注册的加载程序，并立即进入加载状态。

二、引入VueWait组件

第一步：安装

> npm i vue-wait

第二步：在main.js中全局注册

import VueWait from 'vue-wait'

Vue.use(VueWait)

new Vue({
    wait: new VueWait()
})

三、常见应用

/**
 * Vuex模块
 */
import api from '@/api/demo/index';
import axios from 'axios';

export const namespace = 'demo/index';

export const actions = {
    DEMOAC: 'demoac'
};

export default {
    namespaced: true,
    state,
    mutations,
    actions: {
        [actions.DEMOAC](context) {
            return axios.post(''); 
            // return不能省略, 必须返回一个Promise对象, 否则该例中的加载器无效
        }
    }
};

注意，如果VueWait是全局配置的，则启动的加载器可在任意组件使用。

四、拓展

拓展1：VueWait的默认属性配置

new Vue({
    render: h => h(App),
    wait: new VueWait({
        // 默认值如下
        useVuex: false, // 使用Vuex管理等待状态
        vuexModuleName: 'wait', // 默认的Vuex模块名称

        registerComponent: true, // 注册v-wait组件
        componentName: 'v-wait', // 组件名称, 可自定义

        registerDirective: true, // 注册v-wait指令 
        directiveName: 'wait' // 伪指令名称, 可自定义
    })
}).$mount('#app')

拓展2：使用Vuex管理等待状态

全局注册时，将useVuex配置项设置为true，即可使用Vuex管理等待状态。

import VueWait from 'vue-wait'

Vue.use(VueWait)

new Vue({
    wait: new VueWait({
        useVuex: true,
        vuexModuleName: 'vuex-example-module' // Vuex模块名称, 可选的, 默认为'wait'
    })
})

拓展3：VueWait选项

可以使用如下配置项，自定义VueWait的行为。

选项名称	类型	默认	描述
accessorName	String	"$wait"	设置访问器名称，可更改
useVuex	Boolean	false	是否启用与Vuex组件的集成，若启用则v-wait组件和指令禁用
vuexModuleName	String	"wait"	Vuex模块名称
registerComponent	Boolean	true	注册v-wait组件
componentName	String	"v-wait"	更改v-wait组件名称
registerDirective	Boolean	true	注册v-wait指令
directiveName	String	"v-wait"	更改v-wait指令名称

拓展4：全局模板属性

VueWait提供了一些全局模板属性，可通过$wait访问，功能如下所示。

.any

任意加载器启动，返回true，没有任何加载器启动时，返回false。

.is(loader String | Matcher) / .waiting(loader String | Matcher)

启动指定加载器时，返回true，否则返回false。注意，可以使用matcher匹配器使代码更灵活。

.is(loader Array) 或 .waiting(loader Array)

数组中包含的任意加载器启动，返回true，否则返回false。注意，可以使用matcher匹配器使代码更灵活。

.start(loader String)、.end(loader String)

启动/关闭指定加载器。

.progress(loader String, current [, total = 100])

设置指定加载器的进度。current表示当前进度，totle表示总量。

.percent(loader String)

返回指定加载器的百分比。

拓展5：指令

使用指令可以使模板更简洁，如下是一些指令的用法。

v-wait:visible="'loader String'"

指定加载器启动，返回true，关闭返回false。

v-wait:hidden="'loader String'" 或 v-wait:visible.not="'loader String'"

指定加载器关闭，返回true，启动返回false。

v-wait:disabled="'loader String'"

指定加载器启动，则给当前元素标签添加disabled特性，否则移除disabled特性。

v-wait:enabled="'loader String'" 或 v-wait:disabled.not="'loader String'"

指定加载器启动，则给当前元素标签移除disabled特性，否则添加disabled特性。

v-wait:click.start="'loader String'"、v-wait:click.end="'loader String'"

单击启动/关闭指定加载器。

v-wait:toggle="'loader String'"

单击时切换指定加载器的状态。

v-wait:click.progress="['loader String', 80]"

单击时设置指定加载器的进度。

拓展6：action映射器和getter映射器

VueWait提供了action映射器和getter映射器来配合Vuex使用。action映射器有两个参数。其一为vuex的模块名，如果vuex没有区分模块，可省略，其二为wait配置。

假设有一个名为getList的异步操作，它将调用映射的方法，并在解析动作时启动加载器。

/**
 * vuex代码
 */
actions: {
    getList() {
        return axios.post(postApi);
    }
}
// return不能省略, 必须返回一个Promise对象, 否则action映射器中设置的加载器无效

还可以将vuex的action操作映射到自定义方法，并自定义加载器名称，代码如下所示。

action映射器的第二个参数也可以是数组，如下代码所示。

拓展7：waitFor(loader String，func Function[，forceSync = false])

waitFor可以用来包装函数。第一个参数为加载器，调用包装函数时启动加载器。第二个参数为原始函数，原始函数加载完成后关闭加载器。

默认情况下，waitFor返回的是异步函数。如果需要返回同步函数，只须将最后一个参数设置为true。注意，最后一个参数设置为true后，加载器会失效。

拓展8：v-wait组件

启用

VueWait默认启用v-wait组件，如下代码所示。

import VueWait from 'vue-wait'

Vue.use(VueWait)

new Vue({
    wait: new VueWait({
        registerComponent: true // 默认值, 启动v-wait组件
    })
})

如果将配置项registerComponent设置为false，则禁用v-wait组件，此时可以通过手动导入的方式继续使用该组件。

new Vue({
    wait: new VueWait({
        registerComponent: false// 禁用v-wait组件
    })
})

应用

拓展9：v-wait组件和可以与其它组件库搭配使用

只须将slot='waiting'添加到对应组件，vue即可处理其余工作。

import { OrbitSpinner } from 'epic-spinners';
Vue.component('orbit-spinner', OrbitSpinner);

还可以使用其它的组件库：https://github.com/vuejs/awesome-vue#loader