Vue Loading 自己造轮子

1.src=>componentts 下新建一个Loading.vue  // 创建 Loading template模板

2.src=>componentts 下新建一个index.js  //  把Loading  show ,hidden 挂到vue原型对像上

const LOADING = {
    install(Vue) {
        if (typeof window !== 'undefined' && window.Vue) {
            Vue = window.Vue
        }
        let tpl;
        // 挂载到vue原型上，暴露两个方法
        Vue.prototype.$loading = {
            show(){
                var loading = Vue.extend(require('@/components/Loading/Loading').default);
                // import Loading from './Loading.vue'
                tpl = new loading().$mount().$el;
                debugger
                document.body.appendChild(tpl);
                return tpl
            },
            hidden(){
                return document.body.removeChild(tpl);
            }

        }
    }
}
export default LOADING

3. main.js中全局调用

import loading from './components/Loading/index'  // Loading
Vue.use(loading)

4.在组件中调用

    methods:{
        handleLogin() {
            this.$loading.show(); // loading显示 --- 回调开始  Loading 显示
            if(this.isClick == false){
                return;
            }
            this.isClick = false;  // 防多点击
            let data = {
                userName: this.loginForm.userName, // 帐号
                passWord: this.loginForm.passWord, // 密码
                device: this.loginForm.device, // 设备端
                parentGame: this.loginForm.parentGame, // 父级
                childGame: this.loginForm.childGame // 子级
            }
            this.$store.dispatch('LoginByToken', data).then((res) => {
                this.$tips.success('登录成功') // 成功提示
                this.$loading.hidden(); // loading隐藏 --------回调成功后 Loading隐藏
                this.isClick = true;  // 防多点击
                if(res.data.code == 0){
                    setToken(res.data.token)
                    this.$router.push({ path: this.redirect || '/' })
                }
            })
        }
    }