From fff7f793e371e6019545823253057702b62f032f Mon Sep 17 00:00:00 2001 From: zhujiruo Date: Mon, 12 Jan 2026 22:40:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(highlight):=20=E6=B7=BB=E5=8A=A0=E9=AB=98?= =?UTF-8?q?=E4=BA=AE=E6=96=87=E6=9C=AC=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=20(#796)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 onHighlightClick 属性用于监听高亮文本的点击事件 - 在 README.md 中更新文档，添加点击事件的使用说明和示例 - 添加 demo4 演示高亮文本点击事件的用法 - 更新类型定义文件，添加 onHighlightClick 的 TypeScript 类型声明 --- package.json | 3 +++ packages/vantui/src/highlight/README.md | 27 ++++++++++---------- packages/vantui/src/highlight/demo/demo4.tsx | 19 ++++++++++++++ packages/vantui/src/highlight/demo/index.tsx | 5 ++++ packages/vantui/src/highlight/index.tsx | 2 ++ packages/vantui/types/highlight.d.ts | 4 +++ 6 files changed, 46 insertions(+), 14 deletions(-) create mode 100644 packages/vantui/src/highlight/demo/demo4.tsx diff --git a/package.json b/package.json index 8c0d7eaf0..9baeafc4e 100644 --- a/package.json +++ b/package.json @@ -123,5 +123,8 @@ "rimraf": "^3.0.2", "stylelint": "^14.11.0", "typescript": "^4.7.4" + }, + "volta": { + "node": "16.20.2" } } \ No newline at end of file diff --git a/packages/vantui/src/highlight/README.md b/packages/vantui/src/highlight/README.md index afc510379..afdac532a 100644 --- a/packages/vantui/src/highlight/README.md +++ b/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 | 是否自动转义 | _  boolean
_ | true | `false` | -| caseSensitive | 是否区分大小写 | _  boolean
_ | false | `false` | -| highlightClass | 高亮元素的类名 | _  string
_ | - | `false` | -| keywords | 期望高亮的文本 | _  string ¦ string[]
_ | - | `true` | -| sourceString | 源文本 | _  string
_ | - | `true` | -| unhighlightClass | 非高亮元素的类名 | _  string
_ | - | `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 | 是否自动转义 | _  boolean
_ | true | `false` | +| caseSensitive | 是否区分大小写 | _  boolean
_ | false | `false` | +| highlightClass | 高亮元素的类名 | _  string
_ | - | `false` | +| keywords | 期望高亮的文本 | _  string ¦ string[]
_ | - | `true` | +| sourceString | 源文本 | _  string
_ | - | `true` | +| unhighlightClass | 非高亮元素的类名 | _  string
_ | - | `false` | +| onHighlightClick | 高亮文本点击事件 | _  (
    text: string
  ) => void
_ | - | `false` | diff --git a/packages/vantui/src/highlight/demo/demo4.tsx b/packages/vantui/src/highlight/demo/demo4.tsx new file mode 100644 index 000000000..4f92c7855 --- /dev/null +++ b/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 ( + + ) +} diff --git a/packages/vantui/src/highlight/demo/index.tsx b/packages/vantui/src/highlight/demo/index.tsx index 212edb126..4df0aea6f 100644 --- a/packages/vantui/src/highlight/demo/index.tsx +++ b/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 { + + + + ) } diff --git a/packages/vantui/src/highlight/index.tsx b/packages/vantui/src/highlight/index.tsx index dc3881a58..ba25ad7ae 100644 --- a/packages/vantui/src/highlight/index.tsx +++ b/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 ( onHighlightClick && onHighlightClick(text)} key={index} > {text} diff --git a/packages/vantui/types/highlight.d.ts b/packages/vantui/types/highlight.d.ts index f9dbcabe5..2da1a40f7 100644 --- a/packages/vantui/types/highlight.d.ts +++ b/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