本篇文章给大家带来的内容是关于electron页内查找模块介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
实现electron app页内按关键字查找匹配文本的功能
特征
依赖于electron的findinpage api
支持使用者灵活配置ui界面
支持区分大小写
当用户输入时自动查找
查找输入框文本隔离，不会被匹配到
支持以下electron版本 ^1.8.7, ^2.0.0, ^3.0.0, ^4.0.0
支持以下平台 windows, linux, mac
演示
默认ui
定制化ui
安装
$   npm install electron-find --save
使用
# 引入模块import { remote, ipcrenderer } from 'electron'import { findinpage } from 'electron-find'# 使用默认配置来创建实例let findinpage = new findinpage(remote.getcurrentwebcontents())findinpage.openfindwindow()# 开启预加载选项，创建实例的时候会同时加载查找窗口相关domlet findinpage = new findinpage(remote.getcurrentwebcontents(), {  preload: true})findinpage.openfindwindow()# 配置父节点元素, 默认为 document.bodylet findinpage = new findinpage(remote.getcurrentwebcontents(), {  parentelement: document.queryselector('#id')})findinpage.openfindwindow()# 配置查找窗口显示或隐藏的过渡周期, 默认为 300 (ms)let findinpage = new findinpage(remote.getcurrentwebcontents(), {  duration: 200})findinpage.openfindwindow()# 配置查找窗口相对于父级定位节点的偏移量let findinpage = new findinpage(remote.getcurrentwebcontents(), {  offsettop: 20,  offsetright: 30})findinpage.openfindwindow()# 自定义ui界面颜色let findinpage = new findinpage(remote.getcurrentwebcontents(), {  boxbgcolor: '#333',  boxshadowcolor: '#000',  inputcolor: '#aaa',  inputbgcolor: '#222',  inputfocuscolor: '#555',  textcolor: '#aaa',  texthoverbgcolor: '#555',  caseselectedcolor: '#555'})findinpage.openfindwindow()# 参考demonpm installnpm run e
快捷键
enter： 查找下一个
shift + enter： 查找上一个
esc： 关闭窗口
另外, 可以参考demo，使用全局快捷键来打开窗口。
api
类: findinpage
new findinpage(webcontents, [options])
webcontents  object(required) - 渲染进程的webcontents对象
options  object(optional)
preload  boolean - 创建实例的时候是否预加载查找窗口。 默认为 false。
parentelement  object - 指定查找窗口的父级节点。 默认为 document.body。
duration  number - 指定查找窗口显示或隐藏的过渡周期。 默认为 300 (ms)。
offsettop  number - 指定查找窗口相对于父级定位元素顶部偏移量。 默认为 5。
offsetright  number - 指定查找窗口相对于父级定位元素右边偏移量。 默认为 5。
boxbgcolor  string - 配置查找窗口背景色。 默认为 #ffffff。
boxshadowcolor  string - 配置查找窗口阴影色。 默认为 #909399。
inputcolor  string - 配置输入框文本颜色。 默认为 #606266。
inputbgcolor  string - 配置输入框背景颜色。 默认为 #f0f0f0。
inputfocuscolor  string - 配置输入框聚焦时的边框颜色。 默认为 #c5ade0。
textcolor  string - 配置查找窗口中文本颜色。 默认为 #606266。
texthoverbgcolor  string - 配置鼠标悬停文本时的背景色。 默认为 #eaeaea。
caseselectedcolor  string - 配置区分大小写选项选中时的边框颜色。 默认为 #c5ade0。
实例方法
使用new findinpage 创建的实例具有以下方法:
findinpage.openfindwindow()   
当查找窗口关闭时，打开窗口。 当查找窗口已经打开时，聚焦输入框。
findinpage.closefindwindow()   
关闭窗口。
findinpage.destroy()   
关闭窗口，清除对象的引用，释放内存。
以上就是electron页内查找模块介绍（代码示例）的详细内容。