高亮文本 - Semi Design Next

代码演示

如何引入

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';
</script>

基本用法

你可以通过 searchWords 指定需要高亮的关键字，通过 sourceString 指定源文本

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];
</script>

<template>
    <h2>
        <Highlight :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
</template>

指定高亮样式

默认情况下，高亮文本会自带文本样式，背景颜色 --semi-yellow-4, 文本颜色为黑色
暗色模式下，背景颜色为 --semi-yellow-2，文本颜色为白色
当你需要自定义不同的高亮样式时，你可以通过 highlightClassName, highlightStyle来指定

Vue 不会给数值样式补 px，highlightStyle 与高亮词的 style 中的长度要写成 '4px' 这样的字符串；fontWeight: 600 等无单位属性不受影响。

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

    const sourceString = '从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];

    const baseStyle = {
        borderRadius: '6px',
        marginLeft: '4px',
        marginRight: '4px',
        paddingLeft: '4px',
        paddingRight: '4px',
        color: 'var(--semi-white)',
    };
    const tealStyle = { ...baseStyle, backgroundColor: 'var(--semi-teal-7)' };
    const primaryStyle = { ...baseStyle, backgroundColor: 'var(--semi-color-primary)' };
</script>

<template>
    <h2>
        <Highlight :highlightStyle="tealStyle" :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
    <h2>
        <Highlight :highlightStyle="primaryStyle" :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
</template>

不同文本使用差异化样式

支持针对不同的高亮文本使用不同的高亮样式 searchWords 默认为字符串数组。当传入对象数组时，可以通过 text指定高亮文本，同时单独指定 className、style

Vue 中对象项的类名字段写作 class，与模板里的写法一致。

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = [
        {
            text: 'Semi',
            style: { backgroundColor: 'var(--semi-teal-7)', color: 'var(--semi-white)', padding: '4px' },
            class: 'keyword1',
        },
        {
            text: '设计系统',
            style: { backgroundColor: 'var(--semi-color-primary)', color: 'var(--semi-white)', padding: '4px' },
            class: 'keyword2',
        },
        {
            text: '设计稿和代码',
            style: { backgroundColor: 'var(--semi-violet-5)', color: 'var(--semi-white)', padding: '4px' },
            class: 'keyword3',
        },
    ];
</script>

<template>
    <h2>
        <Highlight component="span" :highlightStyle="{ borderRadius: '4px' }" :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
</template>

指定高亮标签

Semi 默认会将 sourceString 中与 searchWords 匹配的文本用 mark 标签包裹，你也可以通过 component 重新指定标签

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];
</script>

<template>
    <h2>
        <Highlight component="strong" :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
</template>

API 参考

Highlight

Props

属性	说明	类型	默认值
autoEscape	是否自动转义 searchWords 中的正则特殊字符。	`boolean`	`semiDefault("Highlight", "autoEscape", true)`
caseSensitive	是否区分大小写。	`boolean`	`semiDefault("Highlight", "caseSensitive", false)`
sourceString	源文本。	`string`	`semiDefault("Highlight", "sourceString", "")`
searchWords	需要高亮的文本：字符串、字符串数组，或带 text、class、style 的对象数组。	`string \| SearchWords`	`semiDefault("Highlight", "searchWords", [])`
highlightStyle	高亮标签的内联样式；Vue 不会给数值补 px，长度要写成字符串。	`CSSProperties`	`semiGlobalDefault("Highlight", "highlightStyle")`
highlightClassName	高亮标签的类名。	`string`	`semiGlobalDefault("Highlight", "highlightClassName")`
component	高亮标签名。	`string`	`semiDefault("Highlight", "component", "mark")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
无

Exposes

名称	说明	类型
无

Highlight 没有根元素，渲染的是 Fragment：class、style、id 等 attrs 无处可落，会被丢弃且不告警，也没有可用的 ref。