首頁  >  文章  >  web前端  >  Vue3怎麼實現文章內容中多個關鍵字標記高亮顯示

Vue3怎麼實現文章內容中多個關鍵字標記高亮顯示

WBOY
WBOY轉載
2023-05-16 20:43:582003瀏覽

    具體實現過程

    vue-word-highlighter 是一個小眾的包,並不出名,Github 上也只會百星出頭,不過能用能跑就行,合適才是最好的,小編最近信奉一句話"程序和你一個能跑就行"。

    vue-word-highlighter 支援Vue3Vue2,不過Vue2 版本是透過vue-demi 建構的,對vue-demi 不熟悉的小夥伴還是別用吧(✪ω✪),咱有一說一,用Vue2 來完成該需求,有其他很多包可以推薦。

    至於為什麼,如同它文件所介紹的:

    Vue3怎麼實現文章內容中多個關鍵字標記高亮顯示

    #基本上使用

    它的使用比較簡單的,直接上碼:

    <template>
      <div>
        <input v-model="searchValue" /> 
        <button @click="search">search</button> 
        <div>搜索到的个数:{{result.length}}</div>
        <div>搜索到的内容:{{result}}</div>
        <br/>
        <WordHighlighter
          highlightClass="highlight"
          :query="lightQuery"
          :caseSensitive="false"
          :splitBySpace="true"
          @matches="lightEmit">
    	<div>
    	  我已经远离了你的河流,绝不是疏远,因为我已是身居异土。远远地,依然听得到你翻山越岭、日夜兼程的脚步声,依然无比清晰地看得到你的那条洒满星星的清澈的河流。只要,也只有想起你——故乡,就是异域的那条河流也会洒满故乡的星星。无论醒着还是沉睡,都会重复着那个让人心旌摇曳的画面,星星都在你的河流里百媚地眨眼。因为那条洒满星星的河流途经我无猜的孩童,无知的少年,迷茫的青春,还要经过可知的未来,是不是今后还要交付给大海了呢?那样,大海的那些星星一定是故乡送给他们的馈赠,没有故乡的孕育,大海也会失去灵气,因为大海的源头就在故乡的这头……
    
    	  星星的感情,在城市里总是被耽误。是星星的感情单一,还是城市的滥情呢?如果城市是舞台,星星就不是市民,所以也不是演员。如果天空是舞台,星星就是居民,所以能成为明星。如果河流是舞台,星星就是精灵,她就是大地的灵魂。如今,爱情在城市里就是一个错误,比金钱的质量轻百倍,所以比海洛因更危险。爱情在乡村的河流里,就有了星星的光辉,成就的是海枯石烂的传奇……
    
    	  晴空万里的白昼,总爱涂脂抹粉打扮一番。这样的时候,只有清泉敢从浓妆艳抹的云端踏过,只有披着满身星星的鱼儿敢从蓝天穿过,将自满表现的太阳戏弄一番。浆洗的女人们总爱把笑声抛在河面上,拍打着棒槌当爵士乐的节拍,委婉的歌声随着幸福的河水流淌,斑斓的衣服在白云间飘舞成了彩虹。我听到了大地与天空的窃语,彻底悟出了萨顶顶唱的《万物生》里的深刻与凝重:我看见山鹰在寂寞两条鱼上飞 ,两条鱼儿穿过海一样咸的河水, 一片河水落下来遇见人们破碎 ,人们在行走,身上落满山鹰的灰……
    
              睡得沉沉的夜,呵欠连连,漫长得没有尽头,无论夜几多的黑,可故乡的河流从也不会迷路,因为有星星这明亮的眼睛。你的人生没有迷路,你的梦没有迷失方向,你的未来总在奔跑的路上,是不是也是借了故乡河流里的星星做慧眼呢?如果河流看不到星星,那肯定会落魄的。如果人生看不到那条飘着星星的河流,如果梦里没有那条飘着星星的河流,如果未来的路上没有那条飘着星星的河流,你是不是都会惊慌失措呢?陌生人能通过那条河流找到你的家,如果没有了她你的心能到家吗?
            </div>
         </WordHighlighter>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from "vue";
    import WordHighlighter from "vue-word-highlighter";
    
    export default defineComponent({
      name: "App",
      components: {
        WordHighlighter,
      },
      setup() {
        const searchValue = ref<string>();
        const lightQuery = ref<string>();
        const result = ref<Array<string>>([]);
    
        const search = () => {
          lightQuery.value = searchValue.value;
        };
    
        const lightEmit = (e: Array<string>) => {
          result.value = e
        }
    
        return {
            searchValue,
            lightQuery,
            result,
            search,
            lightEmit
        };
      },
    });
    </script>
    
    <style>
    .highlight{
      background-color: transparent;
      color: red;
      font-weight: bold;
    }
    </style>

    Vue3怎麼實現文章內容中多個關鍵字標記高亮顯示

    是不是超簡單,下面貼一下它支持的一些props 與事件,就又可以愉快的摸魚了。

    props

    ##說明queryString or RegExp-#搜尋內容。 caseSensitiveBoolean#false是否區分大小寫。 diacriticsSensitiveBooleanfalse是否區分變音符號,如splitBySpaceBoolean#false是否用空格分割字串使其成為搜尋字串,如果設定為highlightTagString#標記搜尋到的內容所包裹的標籤。 highlightClassString or Object or Array-為標記的內容加上highlightStyleString or Object or Array-wrapperTag#wrapperClassclasstextToHighlight#v-slot:default事件
    參數 類型 預設值
    uü
    false,則預設把搜尋內容當成一個整體進行搜尋;當query 為正規則時,splitBySpace 預設為false
    #
    class,綁定語法類似於vue
    ##同上 。
    String 整個目標搜尋區的容器標籤。
    String or Object or Array - 為目標搜尋區的容器新增,綁定語法類似於vue
    String 目標搜尋區的內容。

    #事件名稱matchesqueryfunction(value:Array)#原理過程
    說明 回呼參數
    參數變更時觸發,函數會傳回搜尋到的內容
    function fn(content, keywordArray) {
      if(keywordArray.length === 0) return;
    
      keywordArray.forEach(keyword => {
        if(keyword && content.indexOf(keyword) !== -1) {
          content = content.replace(new RegExp(keyword, &#39;g&#39;), `<mark>${keyword}</mark>`);
        }
      });
    
      return content;
    }

    以上是Vue3怎麼實現文章內容中多個關鍵字標記高亮顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文轉載於:yisu.com。如有侵權,請聯絡admin@php.cn刪除