在vue中加载DOM后，使微调器停止并渲染内容

Question

我在项目中制作了一个微调器组件，并传递一些道具来加载微调器，就像这个

Vue.component("Spinner", require("./components/Loading/Loading.vue").default, {
props: ["loading"]
});

.spinner {
width: 100%;
height: 100%;
background-color: white;
position: fixed;
transition: 0.5s;
z-index: 999;
}


.ring {
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
height: 100%;
z-index: 1000;
}

<template>
<div class="spinner">
<div class="ring">
<half-circle-spinner :size="60" color="#1ABC9C"/>
</div>
</div>
</template>

我在其他组件中称之为

<template>


<Spinner key="list-key" :loading="true"/>


</template>

我需要的是在所有DOM元素都加载到我的页面上时生成this.spin = false。请告诉我你的想法

Answer 1

我们将在创建组件时将isLoading变量初始化为true，然后在mounted钩子中将其设置为false-通过在挂载的钩子中使用nextTick，它将在加载所有dom子级后执行：https://v2.vuejs.org/v2/api/#mounted

您可以尝试使用v-if&v-else根据数据属性(如isLoading(显示/隐藏内容/微调器，内容加载后可以更改：

<template>
<div>
<Spinner v-if="isLoading"/>
<div v-else>
... actual dom content
</div>
</div>
</template>
<script>
export default {
data () {
return {
isLoading: true
}
},
mounted () {
this.$nextTick(() => {
this.isLoading = false
})
}
}
</script>