vue中可以選擇文字高亮的插件
高亮,類似下面這種情況
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cskXSUVGewhVZ4B3MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL1UjN4ETOwQTM1ITOwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
一般可由後端傳回帶标簽的字段,前端直接渲染即可
前端實作高亮,可以使用vue-text-highlight插件
實作比較簡單
安裝:
npm install --save vue-text-highlight
引入:
在main.js裡:
import TextHighlight from ‘vue-text-highlight’;
Vue.component(‘text-highlight’, TextHighlight);
使用:
<text-highlight :queries="queries">{{ description }}</text-highlight>
data() {
return {
queries: ['birds', 'scatt'],//需要高亮的文字
description: 'Tropical birds scattered as Drake veered the Jeep'
};
}
運作結果:
當然,可以自己設定高亮的樣式
.text__highlight {
color: red !important;
background: none !important;
}
貼一段我自己的代碼
<ul class="list2">
<li v-for="(item, index) in myData" :key="index">
<text-highlight :queries="queries">{{item.companyName}}</text-highlight>
</li>
</ul>
更多具體内容看這裡:https://www.npmjs.com/package/vue-text-highlight: