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