Fes Design

TextHighlight 文本高亮 ​

用于高亮文本中的指定文字

组件注册 ​

js
import { FTextHighlight } from '@fesjs/fes-design';

app.use(FTextHighlight);

代码演示 ​

基础用法 ​

play
<template>
    <FSpace>
        <FForm :labelWidth="80">
            <FFormItem label="严格模式：">
                <FSwitch v-model="strict">
                    <template #active> 开 </template>
                    <template #inactive> 关 </template>
                </FSwitch>
            </FFormItem>
            <FFormItem label="高亮词：">
                <FInput
                    v-model="str"
                    placeholder="空格分隔"
                    @change="strChange"
                />
            </FFormItem>
        </FForm>
    </FSpace>
    <FSpace>
        <FTextHighlight :searchValues="searchValues" :strict="strict">
            <FText>
                This is text mixed icon
                <BellOutlined />
                and component
                <FButton>Button</FButton>
                and
                <FText>a subtext</FText>
                .
            </FText>
            <div style="font-size: 30px; margin: 10px 0px;">This is the string for the div wrap.</div>
            This is a plain text string.
            <div>这是中文字符串。</div>
        </FTextHighlight>
    </FSpace>
</template>

<script setup>
import { ref } from 'vue';
import { BellOutlined } from '@fesjs/fes-design/icon';

const searchValues = ref([]);

const str = ref('');

const strChange = () => {
    searchValues.value = str.value.split(' ');
};

const strict = ref(false);
</script>

自定义样式 ​

可以自定义高亮样式

play
<template>
    <FTextHighlight
        :searchValues="['is']" :markTextStyle="{
            backgroundColor: '#ffdbdc',
            color: '#ff4d4f',
        }"
    >
        This is a plain text string.
    </FTextHighlight>
</template>

TextHighlight Props ​

属性说明类型默认值
searchValues搜索内容Array<string>[]
strict严格模式，是否区分大小写匹配booleanfalse
markTextStyle自定义高亮样式Object<CSSProperties>-

TextHighlight slots ​

slot 名称说明
default用户的文本内容