码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli -- vantUI按需加载

时间:2019-04-03 12:15:34      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:vue   html   index   引入   按需加载   position   spi   from   spinner   

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%);
        }
    }
}

vue-cli -- vantUI按需加载

标签:vue   html   index   引入   按需加载   position   spi   from   spinner   

原文地址:https://www.cnblogs.com/zjh-study/p/10647746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!