存在（Presence）
管理元素的挂载和卸载，并支持过渡效果。
Presence 组件提供了对元素挂载/卸载的增强控制。它确保动画和过渡在元素从 DOM 中移除之前完成，使其成为动画 UI 组件的理想选择。
API 参考
| 属性 | 默认 | 类型 |
|---|---|---|
present* | 布尔值条件性地挂载或卸载子元素。类似于 | |
forceMount | 布尔值强制元素始终渲染。这对于通过暴露的 |
| 事件触发 | 载荷 |
|---|---|
enter | CustomEvent进入动画开始时调用的事件处理程序 |
after-enter | CustomEvent进入动画完成时调用的事件处理程序 |
leave | CustomEvent离开动画开始时调用的事件处理程序 |
after-leave | CustomEvent离开动画完成时调用的事件处理程序 |
提示
阅读我们的 动画指南，了解更多关于使用 Presence 组件实现动画的信息。
示例
vue
<template>
<Presence :present="isVisible">
<div
:data-open="isVisible ? 'open' : 'close'"
class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut"
>
<slot />
</div>
</Presence>
</template>强制挂载
当您需要确保内容始终被渲染，无论其存在状态如何时
vue
<template>
<Presence v-slot="{ present }" :present="isVisible" :force-mount="true">
<div>
This content will always be rendered
<div v-if="present">
This content is hidden
</div>
</div>
</Presence>
</template>