vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示功能
先上效果圖：
我們有多組關(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>";
這里采取了字符串拼接的方法來(lái)進(jìn)行渲染
但如果你寫(xiě)成這樣
<span class="highlight">keyitem</span>
然后在css中定義highlight的樣式
.highlight {
color:red
}
這樣做是不生效的
解釋我參考了這位兄弟說(shuō)的
所以解決方法有以下幾種
1.直接去掉css的scoped屬性 但是這樣做很容易搞亂布局
2.寫(xiě)成以下形式
.aaa >>>.highlight{
color:red
}
3.把樣式以字符串拼接的方式插入
這樣做的好處是 可以動(dòng)態(tài)設(shè)置v-html的樣式
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue實(shí)現(xiàn)控制商品數(shù)量組件封裝及使用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)控制商品數(shù)量組件的封裝及使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果【推薦】
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果的思路詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
Element控件Tree實(shí)現(xiàn)數(shù)據(jù)樹(shù)形結(jié)構(gòu)的示例代碼
我們?cè)陂_(kāi)發(fā)中肯定會(huì)遇到用樹(shù)形展示數(shù)據(jù)的需求,本文主要介紹了Element控件Tree實(shí)現(xiàn)數(shù)據(jù)樹(shù)形結(jié)構(gòu)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Vue中使用Printjs插件實(shí)現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無(wú)需離開(kāi)界面，也無(wú)需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實(shí)現(xiàn)打印功能,需要的朋友可以參考下2022-08-08
本篇文章給大家分享了Vue實(shí)例的相關(guān)內(nèi)容以及重要知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
vue如何在vue.config.js文件中導(dǎo)入模塊
這篇文章主要介紹了vue如何在vue.config.js文件中導(dǎo)入模塊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過(guò)props或事件來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue中ElementUI分頁(yè)組件Pagination的使用方法
這篇文章主要為大家詳細(xì)介紹了Vue中ElementUI分頁(yè)組件Pagination的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
vue.js仿hover效果的實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue.js仿hover效果的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
vue項(xiàng)目啟動(dòng)如何設(shè)置默認(rèn)啟動(dòng)頁(yè)
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)如何設(shè)置默認(rèn)啟動(dòng)頁(yè)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06