feat(TextHighlight): 高亮组件新增自定义样式 (#786)

Co-authored-by: blankzhang <[email protected]>
WeBankFinTech · May 6, 2024 · 9d11004 · 9d11004
1 parent f7e04b8
commit 9d11004
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/components/text-highlight/props.ts b/components/text-highlight/props.ts
@@ -1,4 +1,4 @@
-import type { ComponentObjectPropsOptions, PropType } from 'vue';
+import type { CSSProperties, ComponentObjectPropsOptions, PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../_util/interface';
 
 export const textHighlightProps = {
@@ -12,6 +12,9 @@ export const textHighlightProps = {
         type: Boolean,
         default: false,
     },
+    markTextStyle: {
+        type: Object as PropType<CSSProperties>,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 // 组件暴露给外部的 props 类型

diff --git a/components/text-highlight/text-highlight.tsx b/components/text-highlight/text-highlight.tsx
@@ -35,7 +35,7 @@ export default defineComponent({
         // 渲染高亮的部分
         const renderHighLight = (part: string): VNode => {
             return (
-                <FText tag="mark" class="highlight">
+                <FText tag="mark" class="highlight" style={props.markTextStyle}>
                     {part}
                 </FText>
             );

diff --git a/docs/.vitepress/components/text-highlight/base.vue b/docs/.vitepress/components/text-highlight/base.vue
@@ -12,7 +12,7 @@
                     v-model="str"
                     placeholder="空格分隔"
                     @change="strChange"
-                ></FInput>
+                />
             </FFormItem>
         </FForm>
     </FSpace>
@@ -29,6 +29,7 @@
             </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>

diff --git a/docs/.vitepress/components/text-highlight/index.md b/docs/.vitepress/components/text-highlight/index.md
@@ -18,12 +18,20 @@ app.use(FTextHighlight);
 base.vue
 :::
 
+### 自定义样式
+可以自定义高亮样式
+
+:::demo
+markTextStyle.vue
+:::
+
 ## TextHighlight Props
 
-| 属性         | 说明                         | 类型            | 默认值  |
-| ------------ | ---------------------------- | --------------- | ------- |
-| searchValues | 搜索内容                     | `Array<string>` | `[]`    |
-| strict       | 严格模式，是否区分大小写匹配 | `boolean`       | `false` |
+| 属性          | 说明                         | 类型                    | 默认值  |
+| ------------- | ---------------------------- | ----------------------- | ------- |
+| searchValues  | 搜索内容                     | `Array<string>`         | `[]`    |
+| strict        | 严格模式，是否区分大小写匹配 | `boolean`               | `false` |
+| markTextStyle | 自定义高亮样式               | `Object<CSSProperties>` | `-`     |
 
 ## TextHighlight slots
 

diff --git a/docs/.vitepress/components/text-highlight/markTextStyle.vue b/docs/.vitepress/components/text-highlight/markTextStyle.vue
@@ -0,0 +1,10 @@
+<template>
+    <FTextHighlight
+        :searchValues="['is']" :markTextStyle="{
+            backgroundColor: '#ffdbdc',
+            color: '#ff4d4f',
+        }"
+    >
+        This is a plain text string.
+    </FTextHighlight>
+</template>