Highlight テキスト強調 - Vant 4
✨ Highlight テキスト強調
🎯 概要
テキストの中の重要な情報を明るく目立たせたいですか？Highlight コンポーネントはあなた専用のスポットライトです！🌟 重要なコンテンツを正確に特定して強調表示し、ユーザーがすぐに重要な情報を見つけられるようにします。検索結果、キーワードのマーキング、重要コンテンツのリマインダーなど、あらゆる場面で簡単に対応できます！
💡 注意事項：この素晴らしいコンポーネントを使用するには、
vantを >= 4.8.0 バージョンにアップグレードしてください！
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法については、コンポーネントの登録を参照してください。
js
import { createApp } from 'vue';
import { Highlight } from 'vant';
const app = createApp();
app.use(Highlight);🎯 コードの例
🔧 基本的な使い方
Highlight コンポーネントに「主役」（keywords）と「台本」（source-string）を指定するだけで、自動的に主役にスポットライトを当てます！✨
html
<van-highlight :keywords="keywords" :source-string="text" />ts
export default {
setup() {
const text = 'ゆっくり急げ、人生は難問を投げかけてくるが、いつかは答えを出してくれるものだ。';
const keywords = '難問';
return { text, keywords };
},
};🔍 複数のキーワードの一致
一つのスポットライトでは足りないですか？問題ありません！Highlight は複数のキーワードに同時に光を当てることができ、あなたのテキストを「星が輝く」素晴らしいパフォーマンスに変えます！🌟🌟🌟
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;
font-weight: bold;
background: linear-gradient(45deg, #ff6b6b, #feca57);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| auto-escape | 特殊文字を自動的にエスケープするかどうか（正規表現文字を通常の文字に変換する） | boolean | true |
| case-sensitive | 大文字と小文字を区別するかどうか（A と a は同じものですか？） | 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 コンポーネントを参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-highlight-tag-color | var(--van-primary-color) | 強調テキストの色（スターの専用の輝き） |
💡 使用テクニック
- 検索シナリオ：検索結果でユーザーが入力したキーワードを強調表示し、検索効率を向上させます
- コンテンツのマーキング：記事やコメントで重要な情報をマークし、可読性を高めます
- キーワードのリマインダー：長いテキストで注意が必要な単語を強調表示します
- 多言語サポート：
case-sensitive属性と組み合わせて、異なる言語の大文字小文字の規則を処理します
📚 関連ドキュメント
- Search 検索 - 検索機能の最高の相棒
- Tag タグ - コンテンツをマークする別の方法
- TextEllipsis テキスト省略 - 長いテキストのエレガントな処理
- Cell セル - 構造化されたコンテンツの表示
- Badge バッジ - 数字または状態のリマインダー
- Divider 分割線 - コンテンツ領域の分割
- Space スペース - コンポーネント間のスペースの制御