快捷導(dǎo)航

vue實(shí)現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示功能

更新時間：2019年07月25日 11:41:18 作者：無錫肖奈

最近小編遇到這樣的問題，多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關(guān)鍵詞匹配改變字體顏色，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

先上效果圖：

我們有多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同

先擬定一組數(shù)據(jù)

colors: [
    "#FFB5C5",
    "#EEC900",
    "#D1EEEE",
    "#40E0D0",
    "#FFFF00",
    "#FF7F00",
    "#FF6A6A",
    "#B3EE3A",
    "#9F79EE",
    "#FFC1C1"
   ],
   keywordsdetail: ["好看", "美麗", "wfewf"],
   comments: [
    {
     text: "老師 好看好看222"
    },
    {
     text: "老師美麗11111極了"
    },
    {
     text: "老師太搞笑34234了"
    },
    {
     text: "老師搞笑的不的了"
    },
    {
     text: "老師:ox::beer:wfewf啊"
    }
   ]

我們自定義一些顏色值以及關(guān)鍵詞和詳情文字

用內(nèi)聯(lián)樣式的方法設(shè)置關(guān)鍵詞的不同背景色顯示

<span
    v-for="(item,index) in keywordsdetail"
    :key="index"
    class="keyworditem"
    :style="{backgroundColor:colors[index]}"
    @click="showpartkey(index,comments)"
   >{{item}}</span>

下面定義關(guān)鍵詞匹配改變字體顏色的方法

changeColor(resultsList, keywords) {
   keywords.map((keyitem, keyindex) => {
    resultsList.map((item, index) => {
     if (keyitem && keyitem.length > 0) {
      // 匹配關(guān)鍵字正則
      let replaceReg = new RegExp(keyitem, "g");
      // 高亮替換v-html值
      let replaceString =
       '<span class="highlight"' +
       ' style="color: ' +
       this.colors[keyindex] +
       ';">' +
       keyitem +
       "</span>";
      resultsList[index].text = item.text.replace(
       replaceReg,
       replaceString
      );
     }
    });
   });

   this.comments = [];
   this.comments = resultsList;
  }

我們主要看這一行

let replaceString = '<span class="highlight"' +' style="color: ' + this.colors[keyindex] + ';">' + keyitem + "</span>";

這里采取了字符串拼接的方法來進(jìn)行渲染

但如果你寫成這樣

<span class="highlight">keyitem</span>

然后在css中定義highlight的樣式

.highlight {
color:red
}

這樣做是不生效的

解釋我參考了這位兄弟說的

所以解決方法有以下幾種

1.直接去掉css的scoped屬性但是這樣做很容易搞亂布局

2.寫成以下形式

.aaa >>>.highlight{
color:red
}

3.把樣式以字符串拼接的方式插入

這樣做的好處是可以動態(tài)設(shè)置v-html的樣式

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: