vue實現多組關鍵詞對應高亮顯示功能
更新時間：2019年07月25日 11:41:18 作者：無錫肖奈
最近小編遇到這樣的問題，多組關鍵詞，這里實現了關鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關鍵詞匹配改變字體顏色，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
先上效果圖：
我們有多組關鍵詞，這里實現了關鍵詞的背景色與匹配值的字體顏色值相同
先擬定一組數據
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啊"
}
]
我們自定義一些顏色值以及關鍵詞和詳情文字
用內聯樣式的方法設置關鍵詞的不同背景色顯示
<span
v-for="(item,index) in keywordsdetail"
:key="index"
class="keyworditem"
:style="{backgroundColor:colors[index]}"
@click="showpartkey(index,comments)"
>{{item}}</span>
下面定義關鍵詞匹配改變字體顏色的方法
changeColor(resultsList, keywords) {
keywords.map((keyitem, keyindex) => {
resultsList.map((item, index) => {
if (keyitem && keyitem.length > 0) {
// 匹配關鍵字正則
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>";
這里采取了字符串拼接的方法來進行渲染
但如果你寫成這樣
<span class="highlight">keyitem</span>
然后在css中定義highlight的樣式
.highlight {
color:red
}
這樣做是不生效的
解釋我參考了這位兄弟說的
所以解決方法有以下幾種
1.直接去掉css的scoped屬性 但是這樣做很容易搞亂布局
2.寫成以下形式
.aaa >>>.highlight{
color:red
}
3.把樣式以字符串拼接的方式插入
這樣做的好處是 可以動態(tài)設置v-html的樣式
總結
以上所述是小編給大家介紹的vue實現多組關鍵詞對應高亮顯示功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要為大家介紹了vue?實現滑動塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue 項目代碼拆分的方案，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
npm install卡在“sill idealTree buildDeps“問題的兩種解
本文主要介紹了npm install卡在“sill idealTree buildDeps“問題的兩種解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
Vue的watch選項提供了多種方法來觀測數據屬性的變化,讓我們能夠編寫更加優(yōu)雅和維護性更高的代碼,本文給大家介紹Vue中watch的多種使用方法小結,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了如何在vue項目中使用百度地圖API，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
今天小編就為大家分享一篇解決vue.js 數據渲染成功仍報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
ant design vue中table表格滾動加載實現思路
在處理一寫數據量特別大的情況下,我們不能把后端的數據一次性全部拿到前端在table表格中展示,為了考慮性能優(yōu)化,使用了滾動加載表格數據,這篇文章主要介紹了ant design vue中table表格滾動加載實現思路,需要的朋友可以參考下2024-07-07
vue解決使用webpack打包后keep-alive不生效的方法
今天小編就為大家分享一篇vue解決使用webpack打包后keep-alive不生效的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue項目中使用flow做類型檢測的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
本篇文章主要介紹了如何理解Vue的render函數的具體用法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08