130 lines
2.9 KiB
Markdown
130 lines
2.9 KiB
Markdown
# Highlight 高亮文本
|
|
|
|
### 介绍
|
|
|
|
高亮指定文本内容。请升级 `vant` 到 >= 4.8.0 版本来使用该组件。
|
|
|
|
### 引入
|
|
|
|
通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
|
|
|
|
```js
|
|
import { createApp } from 'vue';
|
|
import { Highlight } from 'vant';
|
|
|
|
const app = createApp();
|
|
app.use(Highlight);
|
|
```
|
|
|
|
## 代码演示
|
|
|
|
### 基础用法
|
|
|
|
你可以通过 `keywords` 指定需要高亮的关键字，通过 `source-string` 指定源文本。
|
|
|
|
```html
|
|
<van-highlight :keywords="keywords" :source-string="text" />
|
|
```
|
|
|
|
```ts
|
|
export default {
|
|
setup() {
|
|
const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。';
|
|
const keywords = '难题';
|
|
|
|
return {
|
|
text,
|
|
keywords,
|
|
};
|
|
},
|
|
};
|
|
```
|
|
|
|
### 多字符匹配
|
|
|
|
如果需要指定多个关键字，可以以数组的形式传入 `keywords`。
|
|
|
|
```html
|
|
<van-highlight :keywords="keywords" :source-string="text" />
|
|
```
|
|
|
|
```ts
|
|
export default {
|
|
setup() {
|
|
const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。';
|
|
const keywords = ['难题', '终有一天', '答案'];
|
|
|
|
return {
|
|
text,
|
|
keywords,
|
|
};
|
|
},
|
|
};
|
|
```
|
|
|
|
### 设置高亮标签类名
|
|
|
|
通过 `highlight-class` 可以设置高亮标签的类名，以便自定义样式。
|
|
|
|
```html
|
|
<van-highlight
|
|
:keywords="keywords"
|
|
:source-string="text"
|
|
highlight-class="custom-class"
|
|
/>
|
|
```
|
|
|
|
```ts
|
|
export default {
|
|
setup() {
|
|
const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。';
|
|
const keywords = '生活';
|
|
|
|
return {
|
|
text,
|
|
keywords,
|
|
};
|
|
},
|
|
};
|
|
```
|
|
|
|
```css
|
|
.custom-class {
|
|
color: red;
|
|
}
|
|
```
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
| --- | --- | --- | --- |
|
|
| auto-escape | 是否自动转义 | _boolean_ | `true` |
|
|
| case-sensitive | 是否区分大小写 | _boolean_ | `false` |
|
|
| highlight-class | 高亮元素的类名 | _string_ | - |
|
|
| highlight-tag | 高亮元素对应的 HTML 标签名 | _string_ | `span` |
|
|
| keywords | 期望高亮的文本 | _string \| string[]_ | - |
|
|
| source-string | 源文本 | _string_ | - |
|
|
| tag | 根节点对应的 HTML 标签名 | _string_ | `div` |
|
|
| unhighlight-class | 非高亮元素的类名 | _string_ | - |
|
|
| unhighlight-tag | 非高亮元素对应的 HTML 标签名 | _string_ | `span` |
|
|
|
|
### 类型定义
|
|
|
|
组件导出以下类型定义：
|
|
|
|
```ts
|
|
import type { HighlightProps, HighlightThemeVars } from 'vant';
|
|
```
|
|
|
|
## 主题定制
|
|
|
|
### 样式变量
|
|
|
|
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
|
|
|
| 名称 | 默认值 | 描述 |
|
|
| ------------------------- | -------------------------- | ------------ |
|
|
| --van-highlight-tag-color | _var(--van-primary-color)_ | 高亮文本颜色 |
|