diff --git a/package.json b/package.json
index 8c0d7eaf..9baeafc4 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 afc51037..afdac532 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 00000000..4f92c785
--- /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 212edb12..4df0aea6 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 dc3881a5..ba25ad7a 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 f9dbcabe..2da1a40f 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