Vue等待遮罩，应用于 等待后台数据

哈喽，废话不多说，简单的代码，杂家就直接上。

采用Vant组件库，大家记得引入哈。

遮罩采用了轻提示，首先给个无限期的，等待后台数据回来（此处采用 时间函数模拟），数据回来后，拿同胞兄弟顶替掉他，一个简单的等待数据遮罩完成。

<template>
    <div class="box">
        <van-button type="primary" @click="startPopup">弹出框f </van-button>
    </div>
</template>

<script>
    export default {
        name: 'rxf',
        data() {
            return {
                isShow: false,
            }
        },
        methods: {
            startPopup() {
                this.isShow = true;
                this.qts();
                setTimeout(() => {
                    this.isShow = false;
                    console.log("延迟成功");
                    this.qts();
                }, 2000)
            },
            qts() {
                if (this.isShow) {
                    this.$toast.loading({ message: "加载中···", duration: 0, forbidClick: true });
                }else{
                    this.$toast.loading({ message: "加载中···", duration: 10, forbidClick: true });

                }
            }
        }
    }
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
    background: #eee;
}
</style>