feat(highlight): 添加高亮文本点击事件功能 (#796)

package.json

@@ -123,5 +123,8 @@
     "rimraf": "^3.0.2",
     "stylelint": "^14.11.0",
     "typescript": "^4.7.4"
+  },
+  "volta": {
+    "node": "16.20.2"
   }
 }

packages/vantui/src/highlight/README.md

@@ -32,21 +32,20 @@ import { Highlight } from '@antmjs/vantui'
 
 ::: $demo3 :::
 
-### HighlightProps [[详情]](https://github.com/AntmJS/vantui/tree/main/packages/vantui/types/highlight.d.ts)
+### 高亮文本点击事件
 
-| 参数             | 说明             | 类型                                                  | 默认值 | 必填    |
-| ---------------- | ---------------- | ----------------------------------------------------- | ------ | ------- |
-| autoEscape       | 是否自动转义     | _&nbsp;&nbsp;boolean<br/>_                            | true   | `false` |
-| caseSensitive    | 是否区分大小写   | _&nbsp;&nbsp;boolean<br/>_                            | false  | `false` |
-| highlightClass   | 高亮元素的类名   | _&nbsp;&nbsp;string<br/>_                             | -      | `false` |
-| keywords         | 期望高亮的文本   | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;string[]<br/>_ | -      | `true`  |
-| sourceString     | 源文本           | _&nbsp;&nbsp;string<br/>_                             | -      | `true`  |
-| unhighlightClass | 非高亮元素的类名 | _&nbsp;&nbsp;string<br/>_                             | -      | `false` |
+通过 `onHighlightClick` 可以监听高亮文本的点击事件。
 
-### 样式变量
+::: $demo4 :::
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考[ConfigProvider 组件](https://antmjs.github.io/vantui/#/config-provider)
+### HighlightProps [[详情]](https://github.com/AntmJS/vantui/tree/main/packages/vantui/types/highlight.d.ts)
 
-| 名称                   | 默认值                   |
-| ---------------------- | ------------------------ |
-| --highlight-text-color | ` var(--primary-color);` |
+| 参数             | 说明             | 类型                                                                                                   | 默认值 | 必填    |
+| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------ | ------ | ------- |
+| autoEscape       | 是否自动转义     | _&nbsp;&nbsp;boolean<br/>_                                                                             | true   | `false` |
+| caseSensitive    | 是否区分大小写   | _&nbsp;&nbsp;boolean<br/>_                                                                             | false  | `false` |
+| highlightClass   | 高亮元素的类名   | _&nbsp;&nbsp;string<br/>_                                                                              | -      | `false` |
+| keywords         | 期望高亮的文本   | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;string[]<br/>_                                                  | -      | `true`  |
+| sourceString     | 源文本           | _&nbsp;&nbsp;string<br/>_                                                                              | -      | `true`  |
+| unhighlightClass | 非高亮元素的类名 | _&nbsp;&nbsp;string<br/>_                                                                              | -      | `false` |
+| onHighlightClick | 高亮文本点击事件 | _&nbsp;&nbsp;(<br/>&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;string<br/>&nbsp;&nbsp;)&nbsp;=>&nbsp;void<br/>_ | -      | `false` |

packages/vantui/src/highlight/demo/demo4.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import { Highlight, Toast } from '@antmjs/vantui'
+
+export default function Demo() {
+  const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。'
+  const keywords = ['生活', '答案']
+
+  const onHighlightClick = (text: string) => {
+    Toast.show(`点击的文本为“${text}”`)
+  }
+
+  return (
+    <Highlight
+      keywords={keywords}
+      sourceString={text}
+      onHighlightClick={onHighlightClick}
+    />
+  )
+}

packages/vantui/src/highlight/demo/index.tsx

@@ -6,6 +6,7 @@ import DemoBlock from '../../../../vantui-demo/src/components/demo-block/index'
 import Demo1 from './demo1'
 import Demo2 from './demo2'
 import Demo3 from './demo3'
+import Demo4 from './demo4'
 
 export default class Index extends Component {
   render() {
@@ -22,6 +23,10 @@ export default class Index extends Component {
         <DemoBlock title="设置高亮标签类名" padding>
           <Demo3 />
         </DemoBlock>
+
+        <DemoBlock title="高亮文本点击事件" padding>
+          <Demo4 />
+        </DemoBlock>
       </DemoPage>
     )
   }

packages/vantui/src/highlight/index.tsx

@@ -106,6 +106,7 @@ export function Highlight(props: HighlightProps) {
       // 高亮和非高亮样式名和标签名
       highlightClass,
       unhighlightClass,
+      onHighlightClick,
     } = props
 
     return highlightChunks.map((chunk, index) => {
@@ -117,6 +118,7 @@ export function Highlight(props: HighlightProps) {
         return (
           <Text
             className={classNames(utils.bem('highlight'), highlightClass)}
+            onClick={() => onHighlightClick && onHighlightClick(text)}
             key={index}
           >
             {text}

packages/vantui/types/highlight.d.ts

@@ -30,6 +30,10 @@ export interface HighlightProps extends ViewProps {
    * @description 非高亮元素的类名
    */
   unhighlightClass?: string
+  /**
+   * @description 高亮文本点击事件
+   */
+  onHighlightClick?: (text: string) => void
 }
 
 declare const Highlight: FunctionComponent<HighlightProps>