vue如何實現(xiàn)多組關鍵詞對應高亮顯示
更新時間：2023年10月11日 11:30:24 作者：暮 色
這篇文章主要介紹了vue如何實現(xiàn)多組關鍵詞對應高亮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue實現(xiàn)多組關鍵詞對應高亮顯示
先上效果圖：
我們有多組關鍵詞，這里實現(xià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: "老師??wfewf啊"
}
]我們自定義一些顏色值以及關鍵詞和詳情文字
用內(nèi)聯(lián)樣式的方法設置關鍵詞的不同背景色顯示
<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>";
這里采取了字符串拼接的方法來進行渲染
但如果你寫成這樣
keyitem
然后在css中定義highlight的樣式
.highlight {
color:red
}這樣做是不生效的
解釋我參考了這位兄弟說的
所以解決方法有以下幾種
1.直接去掉css的scoped屬性 但是這樣做很容易搞亂布局
2.寫成以下形式
.aaa >>>.highlight{
color:red
}3.把樣式以字符串拼接的方式插入
這樣做的好處是 可以動態(tài)設置v-html的樣式
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了手摸手教你實現(xiàn)Vue3 Reactivity，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vuex中的Mutation使用詳解,當我們想修改狀態(tài)值,想傳入的值進而進行修改時,你可以向 store.commit 傳入額外的參數(shù),即 mutation 的 載荷,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vuex及其使用方法，感興趣的同學，可以參考下2021-04-04
本篇文章主要介紹了vue-cli實現(xiàn)多頁面多路由的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了Vue中的computed屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue3中如何使用v-model高級用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級用法參數(shù)綁定傳值的相關知識,包括單個輸入框傳值和多個輸入框傳值,一個組件接受多個v-model值,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
vue-cli 目錄結(jié)構(gòu)詳細講解總結(jié)
這篇文章主要介紹了vue-cli 目錄結(jié)構(gòu)詳細講解總結(jié)，詳細的介紹了整個項目的目錄以及目錄文件的用法，非常具有實用價值，需要的朋友可以參考下2019-01-01
這篇文章主要介紹了使用100行代碼實現(xiàn)vue表單校驗功能，本文通過實例截圖給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家介紹了vue實現(xiàn)At人文本輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09