app-loading-mask.vue 1.7 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
<template>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppLoadingMask extends Vue {

    /**
     * 加载效果key
     * 
     * @private
     * @type {HTMLElement}
     * @memberof AppLoadingMask
     */
    @Prop() maskElement?: string;

    /**
     * Vue生命周期 --- created
     * 
     * @memberof AppLoadingMask
     */
    created() {
        this.beginLoading();
    }

    /**
     * Vue生命周期 --- destoryed
     * 
     * @memberof AppLoadingMask
     */
    destroyed() {
        this.endLoading();
    }

    /**
     * 开始加载
     * 
     * @private
     * @memberof AppLoadingMask
     */
    private beginLoading() {
        if (!this.maskElement) {
            return;
        }
        const userEle = document.createElement('div');
        userEle.setAttribute('id', `${this.maskElement}_cover`);
        const innerDiv = document.createElement('div');
        innerDiv.classList.add('loading');
        for (let i = 0; i < 4; i++) {
            const dot = document.createElement('span');
            innerDiv.appendChild(dot);
        }
        userEle.appendChild(innerDiv);
        const element = document.querySelector(`.${this.maskElement}`);
        // 挂载
        if (element) {
            element.appendChild(userEle);
        }
    }

    /**
     * 结束加载
     * 
     * @private
     * @memberof AppLoadingMask
     */
    private endLoading() {
        const element: any = document.querySelector(`.${this.maskElement}`);
        if (element) {
            const cover = element.querySelector(`#${this.maskElement}_cover`);
            if (cover) {
                element.removeChild(cover);
            }
        }
    }
}
</script>