Electron页内查找模块介绍（代码示例）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于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

安装

1	`$ npm install electron-find --save`

使用

# 引入模块
import { remote, ipcRenderer } from 'electron'
import { FindInPage } from 'electron-find'
 
# 使用默认配置来创建实例
let findInPage = new FindInPage(remote.getCurrentWebContents())
findInPage.openFindWindow()
 
# 开启预加载选项，创建实例的时候会同时加载查找窗口相关dom
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  preload: true
})
findInPage.openFindWindow()
 
# 配置父节点元素, 默认为 document.body
let 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()
 
# 参考demo
npm install
npm run e