vue-cli -- vantUI按需加载

Posted 2021-11-25 zjh-study

1、引入loading组件(想引入几个组件，就在{}里面写入几个组件)

import { Loading } from 'vant'

2、注册loading组件(有几个组件，就在component里面按照样子写几个)

export deafault = {
    components: {
        [Loading.name]: Loading
    }
}

3、调用loading组件

<div class="loading" v-if="isLoading">
        // 调用组件
    <van-loading type="spinner" size="80px"></van-loading>
</div>
// type是vant里loading组件的类型
// size是vant里loading组件的大小

4、设置loading样式

#html {
    height: 100%;
    position: relative;
    .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: rgba(255,255,255,1);
        .van-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}