Electron页内查寻模块介绍（代码示例）-

本篇文章给大家带来的内容是对于Electron页内查寻模块介绍（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于Electron页内查寻模块介绍（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

实现Electron app页内按关键字查寻匹配文本的功能

特征

依赖于Electron的findInPage API

支撑运用者灵便配置UI界面

支撑区分大小写

当会员输入时主动查寻

查寻输入框文本隔离，不会被匹配到

支撑下列Electron版本 ^1.8.7, ^2.0.0, ^3.0.0, ^4.0.0

支撑下列平台 Windows, Linux, Mac

演示

默许UI

安装

$   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

快捷键

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页内查寻模块介绍（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！