vue封装loading效果插件_vue loading组件

这是基于iview的样式，其他组件库可作参考，这里分享两种方法，往下看↓

1、这种方法需要先在template中引用组件，然后在method中调用方法

1)首先在@\src\components下新建loading文件夹，里面新建index.vue

<template>
    <div>
        <Modal v-model="waitModal"
               width="460"
               class="loading-modal"
               :closable="false"
               :mask-closable="false">
            <div class="demo-spin-container">
                <Spin fix>
                    <Icon type="ios-loading"
                          size="18"
                          class="spin-wait-load"></Icon>
                    <div>{{ waitContent }}</div>
                </Spin>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
export default {
    name: 'Loading',
    data() {
        return {
            //等待弹框显示和隐藏
            waitModal: false,
            //等待弹框提示内容
            waitContent: '加载中...',
        }
    },
    methods: {
        // 显示弹框
        show(msg = '') {
            this.waitContent = msg
            this.waitModal = true
        },
        // 隐藏弹框
        hide() {
            this.waitContent = ''
            this.waitModal = false
        },
    },
}
</script>
 
<style lang="less" scoped>
/* 等待模态框样式 */
.loading-modal {
    .demo-spin-container {
        display: inline-block;
        width: 100%;
        height: 100px;
        position: relative;
    }
 
    .ivu-modal-body {
        height: 200px;
        display: flex;
        align-items: center;
    }
 
    .ivu-modal-footer {
        border-top: none;
        padding: 0 !important;
    }
 
    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
 
        50% {
            transform: rotate(180deg);
        }
 
        to {
            transform: rotate(360deg);
        }
    }
}
</style>

2）然后再main.js中引入该组件

import Loading from '@/components/loading'
Vue.component('Loading',Loading)

3）在页面中使用，通过$refs访问Loading组件中的show()方法展示弹框，hide()方法隐藏弹框

<template>
    <div>
        <Button @click="showModal">点击显示弹框</Button>
        <Loading ref="loading"></Loading>
    </div>
</template>
 
<script>
export default {
    name: 'Example',
    create:{
        this.initData()
    },
    methods: {
        initData () {
            // 如果在create中使用时，注意要在$nextTick等待组件挂载完后在调用方法，
            this.$nextTick(()=>{
                this.$refs.loading.show('waiting...')
            })
        },
        showModal () { 
            // 显示弹框
            this.$refs.loading.show('waiting...')
            setTimeout(() => {
                // 隐藏弹框
                this.$refs.loading.hide()
            }, 2000);
        },
    }
}
</script>

2、将组件用插件(plugin)的方式封装

1)用这种方法，components中的写法和上一种方法有些许差别

<template>
    <div>
        <Modal v-model="waitModal"
               width="460"
               class="loading-modal"
               :closable="false"
               :mask-closable="false">
            <div class="demo-spin-container">
                <Spin fix>
                    <Icon type="ios-loading"
                          size="18"
                          class="spin-wait-load"></Icon>
                    <div>{{ waitContent }}</div>
                </Spin>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
 
<script>
export default {
    props: {
        waitModal: Boolean,
        waitContent: {
            type: String,
            default: '正在加载中...',
        },
    },
}
</script>
 
<style lang="less" scoped>
/* 等待模态框样式 */
.loading-modal {
    .demo-spin-container {
        display: inline-block;
        width: 100%;
        height: 100px;
        position: relative;
    }
 
    .ivu-modal-body {
        height: 200px;
        display: flex;
        align-items: center;
    }
 
    .ivu-modal-footer {
        border-top: none;
        padding: 0 !important;
    }
 
    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
 
        50% {
            transform: rotate(180deg);
        }
 
        to {
            transform: rotate(360deg);
        }
    }
}
</style>

2)然后在@\src\plugins下新建loading文件夹，里面新建index.js

// 引入我们的loading.vue组件
import Loading from '@/components/loading'
 
let $vm
 
export default {
    // 必须定义的方法
	install(Vue, options) {
		if (!$vm) {
            //通过Vue.extend()方法创建了一个构造器LoadingPlugin
            const LoadingPlugin = Vue.extend(Loading)
 
            //通过new LoadingPlugin()创建了vm实例，并挂载到一个div元素上 
            $vm = new LoadingPlugin({
                el:document.createElement('div')
            })
 
            //通过document.body.appendChild(vm.el)将其插入到DOM节点中。
            document.body.appendChild($vm.$el)
        }
        //当创建了$vm实例后，我们可以访问该实例的属性和方法
        $vm.waitModal = false
        let loading = {
            show (text = '加载中...') {
                //通过$vm.show就可以改变loading组件的waitModal值来控制其显示隐藏,waitContent 控制传参显示提示文字。
                $vm.waitModal = true;
                $vm.waitContent = text
            },
            hide () {
              $vm.waitModal = false  
            }
        }
        if (!Vue.$loading) {
            Vue.$loading = loading
        }
 
        //通过Vue.mixin或者Vue.prototype.loading来全局添加了$loading事件，其又包含了show和hide两个方法 
		Vue.prototype.$loading = Vue.$loading
 
        //Vue.mixin({
        //    created() {
        //        this.$loading = Vue.$loading;
        //    }
        //})
	},
}

3)在main.js中引入这个插件

// 挂载等待弹框插件放到vue实例中
import Loading from '@/plugins/loading/index.js'
Vue.use(Loading)

4)到这里，就可以直接在method中直接使用了。我们可以直接在页面中使用this.$loading.show()来显示加载，使用this.$loading.hide()来关闭加载。

<template>
    <div>
        <Button @click="showModal">点击显示弹框</Button>
        <Loading ref="loading"></Loading>
    </div>
</template>
 
<script>
export default {
    name: 'Example',
    create:{
        this.initData()
    },
    methods: {
        initData () {
            this.$loading.show('waiting...')
        },
        showModal () { 
            // 显示弹框
            this.$loading.show('waiting...')
            setTimeout(() => {
                // 隐藏弹框
                this.$loading.hide()
            }, 2000);
        },
    }
}
</script>

简单的、不需要传太多的参数的组件封装，个人更推荐使用第二种方案

如有错误的地方，欢迎大佬批评指正。