Vue 项目中高亮搜索关键字

<div class="search"><el-input placeholder="请输入搜索关键字" clearable v-model="keyWord" @keyup.enter.native="search" prefix-icon="el-icon-search"></el-input><div class="btn"><el-button type="text" @click="search">搜索</el-button></div></div>

@keyup 监听键盘事件，还有 keyup.esc keyup.up keyup.space keyup.tab 等
如果用了组件封装的话，就要在事件后加上 .native
@click.stop 阻止事件冒泡，当父元素和子元素都有点击事件时，点击子元素区域，不触发父元素的点击事件
@click.prevent 阻止事件的默认行为，比如阻止 a 标签的自动跳转行为，阻止表单默认提交到 action 的行为

search(){if(!this.keyWord.trim()){this.$message.error("请正确输入搜索关键字")return}this.loading = truethis.isSearch = truethis.getList()},highLight(val,keyWord){const Reg = new RegExp(keyWord, 'i');let res = '';val = val + ''if (val) {res = val.replace(Reg, `<span style="color: #fff;background-color:#e85655">${keyWord}</span>`);this.loading = falsereturn res;}},

用 isSearch 来做标识，为 true ，则进行搜索，进行关键字的高亮
String.replace() 返回由替换值替换之后的新字符串
如果不用正则表达式(i 不区分大小写，g 全局标记)匹配，则 String.replace() 只会替换第一个匹配项
如果出现报错 val.replace is not a function ，有可能是 val 的值为数值类型，所以要先将其转为字符串 val = val + ''

<el-table-columnlabel="label"min-width="140"align="center"><template slot-scope="scope"><span v-if="!isSearch">{{ scope.row.name || "暂无数据" }}</span><span v-else v-html="highLight(scope.row.name, keyWord)"></span></template></el-table-column>

一旦进行搜索，highLight 方法就会被触发
v-html 可成功解析 html 标签属性后再输出，可在其中自定义样式属性
v-text 和 v-cloak 会将 html 标签当成字符串输出

参考链接：https://blog.csdn.net/wh13821662259/article/details/114652229
https://blog.csdn.net/fifteen718/article/details/80359844

Vue 项目中高亮搜索关键字相关推荐

Vue 项目中高亮格式化 xml 代码
效果演示安装插件 $ npm install highlight.js --save 代码实现 xml原文如下: <?xml version=\"1.0\" encodin ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2 <script src="https://unpkg.com/vue@3/dist/vue.global.js&qu ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
在vue项目中使用prismjs（网页代码高亮插件）
在vue项目中使用prismjs 什么是prismjs prismjs是一款代码高亮美化插件,在一些技术博客类的网站中需要展示代码时,可以使用它类似与markdown的代码块, 官网链接:https: ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
vue项目中使用百度地图
安装首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk. 官方文档 JavaScript API v2.0类参考 npm install --sav ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...

Vue 项目中高亮搜索关键字

Vue 项目中高亮搜索关键字相关推荐

最新文章

热门文章

Vue 项目中 高亮搜索关键字

Vue 项目中 高亮搜索关键字相关推荐

最新文章

热门文章

Vue 项目中高亮搜索关键字

Vue 项目中高亮搜索关键字相关推荐