阿里巴巴网站服务器成本,北京海淀区制药企业,鄂州网站推广优化技巧,网站建设服务哪便宜简单分享一个文本高亮显示的自定义指令#xff0c;主要分两部分#xff1a;
1、代码实现#xff1a;在 main.js 文件中添加一个自定义指令#xff0c;实现搜索时文本高亮显示#xff0c;代码如下#xff1a;
const highlightText (el, searchText) {const textCo…简单分享一个文本高亮显示的自定义指令主要分两部分
1、代码实现在 main.js 文件中添加一个自定义指令实现搜索时文本高亮显示代码如下
const highlightText (el, searchText) {const textContent el.textContent;const regex new RegExp(searchText, gi);const highlightedText textContent.replace(regex, (matchedText) {return mark stylebackground-color:#fff;color:#FF6A29${matchedText}/mark;});el.innerHTML highlightedText;
};// 文本高亮的指令
Vue.directive(highlight, {// 当绑定元素插入到 DOM 中时inserted(el, binding) {// 确保传入的表达式是一个字符串if (typeof binding.value ! string) {console.warn(Expect a string value for v-highlight);return;}// 调用高亮逻辑highlightText(el, binding.value);},// 当绑定元素所在的组件的 VNode 更新时componentUpdated(el, binding) {// 调用高亮逻辑因为文本可能已经改变highlightText(el, binding.value);},// 当你需要清理一些在指令创建时设置的东西时比如事件监听器unbind(el) {// 可选移除高亮恢复原始文本el.innerHTML el.textContent;}
});
2、使用部分
templatediv classdemodiv v-highlightsearchKey·东临碣石以观沧海。水何澹澹山岛竦峙。树木丛生百草丰茂。秋风萧瑟洪波涌起。日月之行若出其中星汉灿烂若出其里。幸甚至哉歌以咏志。—— 东汉末年/三国·曹操《观沧海》·神龟虽寿犹有竟时腾蛇乘雾终为土灰。老骥伏枥志在千里烈士暮年壮心不已。盈缩之期不但在天养怡之福可得永年。幸甚至哉歌以咏志。—— 东汉末年·曹操《龟虽寿》/div/div
/templatescript
export default {name: demo,data() {return {searchKey: 水何澹澹};}
};
/script2.2 页面效果如下
