如何使用 vue 3 和 setTimeout 执行预加载？

Question

我正在尝试将预加载器作为页面上的 v-if 组件创建 2 秒，然后将视图切换到另一个块。但我无法正确地写出它。我还需要添加 endSettimeout 方法吗？

<script setup>
  let loading = ref(false)

  const showModal = () => {
  loading = true
  const load = setTimeout(() => {
    loading = true
    modalVisible.value = true
  }, 2000)
  loading = false
  
}
</script>

<template>
  <div>
    <div class="preloader" v-if="loading == true"></div>
    <div class="wrapper">
      <Modal v-model="modalVisible" v-if="modalVisible" />
      <div class="form__container" v-else>
  </div>  
</template>

Answer 1

在您的

setTimeout

中，您应该在超时之后而不是之前将

loading

设置为

false

，并且您需要使用

modalVisible

将

ref()

初始化为反应变量。

<script setup>
  import { ref } from 'vue';

  let loading = ref(false);
  let modalVisible = ref(false);

  const showModal = () => {
    loading.value = true;

    setTimeout(() => {
      loading.value = false;
      modalVisible.value = true;
    }, 2000);
  };
</script>

<template>
  <div>
    <div class="preloader" v-if="loading"></div>
    <div class="wrapper">
      <Modal v-model="modalVisible" v-if="modalVisible" />
      <div class="form__container" v-else>
        <!-- Your form content goes here -->
      </div>
    </div>
  </div>
</template>

Answer 2

您还必须开始加载 - 例如当组件加载时（使用 onMounted）

<script setup>
import {onMounted, ref} from 'vue'

let loading = ref(false)
let modalVisible = ref(false) // init modalVisible

const showModal = () => {
    loading.value = true

    setTimeout(() => {
        loading.value = false
        modalVisible.value = true
    }, 2000)
}
// start loading here
onMounted(async () => {
    showModal()
})
</script>