lojk-ui/src/components/lotusLoading/index.js

lojk vue ui components library

import lotusLoading from './LotusLoading.vue'
const LotusLoading = {
    install:(Vue) => {
        let loadingTpl = Vue.extend(lotusLoading);
        // 2、创建实例，挂载到文档以后的地方
        const instance = new loadingTpl();
        // 3、把创建的实例添加到body中
        instance.$mount(document.createElement('div'));
        // 挂载实例到我们创建的DOM上
        document.body.appendChild(instance.$el);
        const loading = {
            show:(obj)=>{
                instance.show = true;
                instance.type = obj.type||1;
                instance.imageStyle = obj.imageStyle;
                instance.textStyle = obj.textStyle;
                instance.text = obj.text||'数据加载中...';
                if(obj&&obj.time){
                    setTimeout(()=>{
                        instance.show = false;
                    },obj.time)
                }
            },
            hide:()=>{
                instance.show = false;
            }
        };
        if (!Vue.$lotus) {
            Vue.$lotus = {
                loading
            }
        } else {
            Vue.$lotus.loading = loading
        }
        Vue.mixin({
            created: function () {
                this.$lotus = Vue.$lotus
            }
        })
    }
};
export default LotusLoading;