Loading-Box

<script setup lang="ts">
// 加载状态
const isLoad = ref(true)
</script>

<template>
  <div class="h-96 flex flex-center">
    <div class="flex flex-col items-center justify-center gap-3">
      <div class="h-40 w-120 overflow-hidden border rounded-2xl">
        <ObLoadingBox v-model="isLoad">
          <div class="h-10 w-full flex-center gap-3 bg-red">
            docs
          </div>
        </ObLoadingBox>
      </div>
      <ObButton @click="isLoad = !isLoad">
        更改加载状态
      </ObButton>
    </div>
  </div>
</template>

<script setup lang="ts">
// 加载状态
const isLoad = ref(true)
</script>

<template>
  <div class="h-96 flex flex-center">
    <div class="flex flex-col items-center justify-center gap-3">
      <!-- 开启relative -->
      <div class="relative h-40 w-120 overflow-hidden border rounded-2xl">
        <ObLoadingBox v-model="isLoad" mask-mode>
          <div class="h-10 w-full flex-center gap-3 bg-red">
            docs
          </div>
        </ObLoadingBox>
      </div>
      <ObButton @click="isLoad = !isLoad">
        更改加载状态
      </ObButton>
    </div>
  </div>
</template>

<script setup lang="ts">
// 加载状态
const isLoad = ref(true)

// 切换动画
const transitionProps = reactive({
  enterActiveClass: 'animate-slide-in-down animate-duration-250',
  leaveActiveClass: 'animate-slide-out-up animate-duration-250',
})
</script>

<template>
  <div class="h-96 flex flex-center">
    <div class="flex flex-col items-center justify-center gap-3">
      <!-- 开启relative -->
      <div class="relative h-40 w-120 overflow-hidden border rounded-2xl">
        <ObLoadingBox v-model="isLoad" mask-mode :transition-props>
          <div class="h-10 w-full flex-center gap-3 bg-red">
            docs
          </div>
        </ObLoadingBox>
      </div>
      <ObButton @click="isLoad = !isLoad">
        更改加载状态
      </ObButton>
    </div>
  </div>
</template>