精品无码一二三,肏逼片,亚洲黄电影,国产又黄又爽的免费视频,青娱乐国产精品视频,97超碰在线播放,无码影视在线观看,五月天激情婷婷婷久久

來源 |?https://wintc.top/article/18

有時候給頁面內(nèi)容添加一個關(guān)鍵詞搜索功能，如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示，那找起來就會很明顯體驗會好很多。本文就介紹一下關(guān)鍵詞搜索高亮的實現(xiàn)方案。

實現(xiàn)效果大概如下：

可在線預(yù)覽：http://wintc.top/laboratory/#/search-highlight。

一、實現(xiàn)原理

實現(xiàn)原理很簡單：
使用正則匹配出文本內(nèi)容中的所有關(guān)鍵詞，在關(guān)鍵詞外包一層內(nèi)聯(lián)標(biāo)簽，比如span或者font，通過innerHtml渲染文本。使用CSS控制插入的內(nèi)聯(lián)元素樣式，并且記錄下當(dāng)前搜索到的結(jié)果是第幾個，使用不同的樣式來展示。

比如文本內(nèi)容是“江畔何人初見月？江月何年初照人？”，而關(guān)鍵詞是“月”，那替換后的字符串可能變?yōu)椋?/span>

江畔何人初見<font style="background: #ff9632">月font>？江<font style="background: #ffff00">月font>何年初照人？

其中匹配的“月”被替換成了月，并且設(shè)置font標(biāo)簽的背景色，使得搜索到的第一個“月”（當(dāng)前關(guān)鍵詞）背景變?yōu)殚冱S色，而第二個“月”背景變?yōu)辄S色。

本文基于Vue實現(xiàn)了一個組件，并且將組件發(fā)布到了npm上，如果你不想自己寫組件，可以直接安裝使用：vue-search-highlight。
接下來會介紹一下組件vue-search-highlight的使用，然后給出Vue中的搜索高亮的代碼實現(xiàn)。

二、vue-search-highlight組件使用

組件需要傳入文本content以及關(guān)鍵詞keyword，組件會渲染出一個包含content并且關(guān)鍵詞被font元素替換的div元素。
組件功能如下：

關(guān)鍵詞高亮
關(guān)鍵詞匹配總數(shù)以及當(dāng)前關(guān)鍵詞的索引（即是第幾個搜索結(jié)果）
查找上一個、下一個功能，調(diào)用相應(yīng)函數(shù)即可跳到上一個或者下一個

使用方法：

1、安裝組件，使用npm或者yarn

// 如果使用yarnyarn add vue-search-highlight// 如果使用npmnpm install vue-search-highlight

2、引入
vue-search-highlight本身是一個組件，在需要搜索高亮的頁面里引入后，像正常的組件一樣使用即可。

import?SearchHighlight?from?'vue-search-highlight'// 注冊為子組件components: {  'search-highlight': SearchHighlight},

1）、props

2)、events
組件有兩個重要的數(shù)據(jù)，即搜索匹配數(shù)量和當(dāng)前關(guān)鍵詞索引，會通過$emit彈射出來，如果需要展示搜索索引和匹配總數(shù)（比如 3 / 16），你可以監(jiān)聽組件的這兩個事件：

3）、methods
你可以通過ref引用組件，直接調(diào)用組件內(nèi)部的一些方法：

使用示例：

  class="search-highlight"  ref="search"  @current-change="currentChange"  @mactch-count-change="matchCountChange"  :content="content"  :keyword="keyword">

三、組件代碼實現(xiàn)

vue-search-highlight組件代碼如下：

本文完~

Vue關(guān)鍵詞搜索高亮

一、實現(xiàn)原理

二、vue-search-highlight組件使用

三、組件代碼實現(xiàn)

一、實現(xiàn)原理

二、vue-search-highlight組件使用

三、組件代碼實現(xiàn)