代码演示

如何引入

Highlight 从 v2.24.0 版本开始支持

import { Highlight } from '@kousum/semi-ui-vue';

基本用法

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

10

 

1

import { Highlight } from '@kousum/semi-ui-vue';

2

​

3

export default () => {

4

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

5

    const searchWords = ['设计系统', 'Semi Design'];

6

7

    return (<h2>

8

        <Highlight sourceString={sourceString} searchWords={searchWords} />

9

    </h2>);

10

};

Show Error

Auto Save

指定高亮样式

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

41

 

1

import { Highlight } from '@kousum/semi-ui-vue';

2

​

3

export default () => {

4

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

5

    const searchWords = ['设计系统', 'Semi Design'];

6

7

    return (

8

        <>

9

            <h2>

10

                <Highlight

11

                    sourceString={sourceString}

12

                    searchWords={searchWords}

13

                    highlightStyle={{

14

                        borderRadius: 6,

15

                        marginLeft: 4,

16

                        marginRight: 4,

17

                        paddingLeft: 4,

18

                        paddingRight: 4,

19

                        backgroundColor: 'rgba(var(--semi-teal-5), 1)',

20

                        color: 'rgba(var(--semi-white), 1)'

21

                    }}

22

                />

23

            </h2>

24

            <h2>

25

                <Highlight

26

                    sourceString={sourceString}

27

                    searchWords={searchWords}

28

                    highlightStyle={{

Show Error

Auto Save

指定高亮标签

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

14

 

1

import { Highlight } from '@kousum/semi-ui-vue';

2

​

3

export default () => {

4

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

5

    const searchWords = ['设计系统', 'Semi Design'];

6

7

    return (<h2>

8

        <Highlight

9

            sourceString={sourceString}

10

            searchWords={searchWords}

11

            component='strong'

12

        />

13

    </h2>);

14

};

Show Error

Auto Save

API 参考

Highlight

属性	说明	类型	默认值
searchWords	期望高亮显示的文本	string[]	''
sourceString	源文本	string
component	高亮标签	string	mark
highlightClassName	高亮标签的样式类名	ReactNode	-
highlightStyle	高亮标签的内联样式	ReactNode	-
caseSensitive	是否大小写敏感	false	-
autoEscape	是否自动转义	true	-