搜索「 香辛料 」共找到 3 条结果，其中《狼と香辛料》第一卷提到 香辛料 的段落最多。
<script setup lang="ts">
import { Mark, Text } from '@hina-ui/vue'
</script>
<template>
<Text class="max-w-lg">
搜索「
<Mark>香辛料</Mark>
」共找到 3 条结果，其中《狼と香辛料》第一卷提到
<Mark>香辛料</Mark>
的段落最多。
</Text>
</template>
vue
用法
import { Mark } from '@hina-ui/vue'
ts
组件渲染为原生的 mark，带浅色底与很小的圆角，文字颜色不变，因此在段落中不打断阅读。
这一段里 被标记的文字 带有底色。
<script setup lang="ts">
import { Mark, Text } from '@hina-ui/vue'
</script>
<template>
<Text class="max-w-lg">
这一段里
<Mark>被标记的文字</Mark>
带有底色。
</Text>
</template>
vue
示例
标出搜索命中
按关键词切分文本，命中的片段用组件包裹。一段文字中可以出现多处标记。
关键词：航路
狼と香辛料 第一卷讲述行商人与自称丰收之神的少女同行的旅途。
<script setup lang="ts">
import { Mark, Stack, Text } from '@hina-ui/vue'
const keyword = '航路'
const paragraph = '狼と香辛料 第一卷讲述行商人与自称丰收之神的少女同行的旅途。'
const parts = paragraph.split(keyword)
</script>
<template>
<Stack class="max-w-lg">
<Text size="sm" tone="muted">关键词：{{ keyword }}</Text>
<Text>
<template v-for="(part, index) in parts" :key="index">
{{ part }}
<Mark v-if="index < parts.length - 1">{{ keyword }}</Mark>
</template>
</Text>
</Stack>
</template>
vue
正文中的标记
Prose 会为其中的原生 mark 标签应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。
正文中的 mark 标签不需要单独引入组件。
<script setup lang="ts">
import { Prose } from '@hina-ui/vue'
</script>
<template>
<Prose class="max-w-lg">
<p>
正文中的
<mark>mark</mark>
标签不需要单独引入组件。
</p>
</Prose>
</template>
vue
无障碍
- 组件渲染为原生的
mark，部分屏幕阅读器会播报标记的起止。 - 底色只用于引导视线，不表达状态，因此没有色调。
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | — | 追加至根元素的类名 |
Slots
| 插槽 | 说明 |
|---|---|
default | 被标记的文字 |