【Vue.js】検索文字などの特定文字を、マーカーでハイライト表示するコンポーネントを作った

2018-12-11

こんな感じなのを作成します。

コンポーネントのソース

①親コンポーネントから、’allWord’と ‘searchWord’の2つのデータをpropsでわたします。

allWordは全文、 searchWordは、ハイライト表示したい文字です。

②〜④で、文字を、検索対象文字で区切った配列にします。(②、③はもっといい書き方あるはず)

「お腹が減った。パンを食べよう。パンは炭水化物だから太るかもしれないけど!」

で、「パン」という文字を検索した場合は、

[お腹が減った。, パン , を食べよう。, パン, は炭水化物だから太るかもしれないけど!]

という配列になります。

⑤配列にした文字をv-forで回します。検索対象文字の場合は、’-highlight’というクラスをつけて、マーカーが付くようにします。

↑このスタイルも、propsでデータを渡して変更出来るようにすれば、マーカーの色や文字色も変えられて便利です!

呼び出し方

こんな感じでよびだしましょう!

 

 

ーーーーーーーー

この記事がお役に立てたら、是非シェアをお願いします^^