ElementUI极简loading动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/momDIY/article/details/86516360

掌握本教程只需要三分钟~

全局loading

1.在methods中添加以下函数。

openFullScreen(time) {
    const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    setTimeout(()=>loading.close() , time)
}

2. 调用

传入动画时长即可。

    this.openFullScreen(2000)

局部模块loading

给需要loading动画的元素添加v-loading属性，使用data中定义的变量来控制这个属性的值。

<el-row :gutter="20" v-loading='loading'>
<!-- ... -->
</el-row>

• 当变量loading值为true时，展示loading动画，否则隐藏。

END