vue-loading-mixin

全局mixin,自动对methods中的async函数组件注册对应的loading变量

Usage no npm install needed!

<script type="module">
  import vueLoadingMixin from 'https://cdn.skypack.dev/vue-loading-mixin';
</script>

README

vue-loading-mixin

自动为methods中的async异步函数在data中注册对应的loading变量,并且在异步发生和结束时都会改变状态并引发视图联动。

默认情况下,会在vue文件的data中,自动混入名为 loadingPluginData_ 的变量名,使用前需要确保不会出现变量名冲突!

安装

npm i vue-loading-mixin -S

简单使用示例:

main.js

import vueLoadingMixin from 'vue-loading-mixin'
Vue.use(vueLoadingMixin)

demo.vue

<template>
    <div>
        <el-button :loading="loadingPluginData_.onSubmit">提交</el-button>
    <div>
</template>

<script>
    export default {
        data() {
            return {
                // 不需要挂在任何名称。只要保证名称不和 loadingPluginData_ 变量名冲突即可
            }
        },
        methods: {
            async onSubmit(formData) {
                const res = await submitForm()
                .......
            }
        }
    }
</script>

使用其他变量名

main.js

import vueLoadingMixin from 'vue-loading-mixin'
Vue.use(vueLoadingMixin, {
    loadingName: 'loadingM'
})

demo.vue

<template>
    <div>
        <el-button :loading="loadingM.onSubmit">提交</el-button>
    <div>
</template>

<script>
    export default {
        data() {
            return {
                // 不需要挂在任何名称。只要保证名称不和 loadingPluginData_ 变量名冲突即可
            }
        },
        methods: {
            async onSubmit(formData) {
                const res = await submitForm()
                .......
            }
        }
    }
</script>