Spoiler 剧透遮罩

遮住剧透内容，点击或者悬停后揭示。

第三卷的结局是第一卷结尾两人决定继续同行，这一段建议读完正文再看。

<script setup lang="ts">
  import { Spoiler, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg">
    第三卷的结局是
    <Spoiler>第一卷结尾两人决定继续同行</Spoiler>
    ，这一段建议读完正文再看。
  </Text>
</template>

vue

用法

import { Spoiler } from '@hina-ui/vue'

把要遮住的文字放入默认插槽。遮住时内容被噪点覆盖，并且无法选中，点击后从指针位置向外展开。

点击揭示这段被遮住的文字，再点一次重新遮住。

<script setup lang="ts">
  import { Spoiler, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg">
    点击揭示
    <Spoiler>这段被遮住的文字</Spoiler>
    ，再点一次重新遮住。
  </Text>
</template>

vue

示例

悬停揭示

设置 reveal-on="hover" 后，指针移入即揭示，移出重新遮住。键盘聚焦与失焦同样触发。

指针移入即可看到悬停揭示的内容，移出后重新遮住。

<script setup lang="ts">
  import { Spoiler, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg">
    指针移入即可看到
    <Spoiler reveal-on="hover">悬停揭示的内容</Spoiler>
    ，移出后重新遮住。
  </Text>
</template>

vue

受控

hidden 支持双向绑定，可以由外部统一控制一段内容的显隐。

全书结局：交易在最后一刻反转

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Spoiler, Stack, Text } from '@hina-ui/vue'

  const hidden = ref(true)
</script>

<template>
  <Stack class="max-w-lg">
    <Text>
      全书结局：
      <Spoiler v-model:hidden="hidden">交易在最后一刻反转</Spoiler>
    </Text>
    <Button variant="outline" tone="neutral" size="sm" @click="hidden = !hidden">
      {{ hidden ? '全部揭示' : '全部遮住' }}
    </Button>
  </Stack>
</template>

vue

跨行内容

一段跨越多行的文字可以整段遮住。揭示时以指针位置为中心，逐行展开。

跨越多行的剧透同样可以整段遮住，揭示时从指针落点开始展开，逐行铺满整段文字。

<script setup lang="ts">
  import { Spoiler, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-sm">
    <Spoiler>跨越多行的剧透同样可以整段遮住，揭示时从指针落点开始展开，逐行铺满整段文字。</Spoiler>
  </Text>
</template>

vue

降级形态

噪点遮罩依赖浏览器的绘制工作单元。不支持时自动降级为底色加模糊，行为完全一致。设置 force-fallback 可以强制使用降级形态。

默认形态：噪点遮罩

降级形态：底色加模糊

<script setup lang="ts">
  import { Spoiler, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-lg">
    <Text>
      默认形态：
      <Spoiler>噪点遮罩</Spoiler>
    </Text>
    <Text>
      降级形态：
      <Spoiler force-fallback>底色加模糊</Spoiler>
    </Text>
  </Stack>
</template>

vue

行为

遮住时文字无法选中，也无法被复制。
揭示的展开中心取自指针落点，键盘触发时取几何中心。

API

Props

属性	类型	默认值	说明
`hidden`	`boolean`	`true`	是否遮住，支持双向绑定
`revealOn`	`'click' \| 'hover'`	`'click'`	揭示方式
`forceFallback`	`boolean`	`false`	强制使用降级形态
`class`	`string`	—	追加至根元素的类名

Slots

插槽	说明
`default`	被遮住的内容

用法

示例

悬停揭示

受控

跨行内容

降级形态

行为

无障碍

API

Props

Slots