MoreHook

Appearance

Return to top
On this page

useDelayData

对传入的布尔值镜像一个带有延迟的布尔值

Demo

source

真实展示 realData: false
过渡展示 delayData: false

Usage

html
<template>
  <div>
    <p
      v-if="realData"
      :class="['text', delayData ? 'text-display' : 'text-no-display']"
    >
      我是示例文字，我很可爱
    </p>

    <div>真实展示 realData: {{ realData }}</div>
    <div>过渡展示 delayData: {{ delayData }}</div>

    <c-button @click="showText = !showText">设置显隐</c-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDelayData } from '@morehook/core'

const showText = ref(false)
const { realData, delayData } = useDelayData(showText)
</script>

<style>
.text {
  transition: all 0.5s;
  color: #fff;
}
.text-display {
  opacity: 1;
  background-color: rgb(0, 60, 255);
}
.text-no-display {
  opacity: 0;
}
</style>

Type Declarations

typescript
/**
 * 对传入的布尔值镜像一个带有延迟的布尔值
 *
 * 主要场景：自定义弹框的打开和进入会有一个过渡，所以会产生两个状态，点击按钮设置弹框打开，
 * 但是应该还有一个打开动画后弹框完全显示的状态，此hook解决的就是此类场景
 * @param data 真实控制值
 * @param delayTime 延迟的时间
 */
export declare function useDelayData(
  data: Ref<boolean>,
  delayTime?: number
): {
  realData: Ref<boolean>
  delayData: Ref<boolean>
}

Source

Source • Demo • Docs