摘要：指定查找窗口顯示或隱藏的過渡周期。指定查找窗口相對(duì)于父級(jí)定位元素頂部偏移量。配置查找窗口陰影色。實(shí)例方法使用創(chuàng)建的實(shí)例具有以下方法當(dāng)查找窗口關(guān)閉時(shí)，打開窗口。當(dāng)查找窗口已經(jīng)打開時(shí)，聚焦輸入框。關(guān)閉窗口，清除對(duì)象的引用，釋放內(nèi)存。

實(shí)現(xiàn)Electron app頁內(nèi)按關(guān)鍵字查找匹配文本的功能

依賴于Electron的findInPage API

支持使用者靈活配置UI界面

支持區(qū)分大小寫

當(dāng)用戶輸入時(shí)自動(dòng)查找

查找輸入框文本隔離，不會(huì)被匹配到

支持以下Electron版本 ^1.8.7, ^2.0.0, ^3.0.0, ^4.0.0

支持以下平臺(tái) Windows, Linux, Mac

$   npm install electron-find --save

# 引入模塊
import { remote, ipcRenderer } from "electron"
import { FindInPage } from "electron-find"

# 使用默認(rèn)配置來創(chuàng)建實(shí)例
let findInPage = new FindInPage(remote.getCurrentWebContents())
findInPage.openFindWindow()

# 開啟預(yù)加載選項(xiàng)，創(chuàng)建實(shí)例的時(shí)候會(huì)同時(shí)加載查找窗口相關(guān)dom
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  preload: true
})
findInPage.openFindWindow()

# 配置父節(jié)點(diǎn)元素, 默認(rèn)為 document.body
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  parentElement: document.querySelector("#id")
})
findInPage.openFindWindow()

# 配置查找窗口顯示或隱藏的過渡周期, 默認(rèn)為 300 (ms)
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  duration: 200
})
findInPage.openFindWindow()

# 配置查找窗口相對(duì)于父級(jí)定位節(jié)點(diǎn)的偏移量
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： 查找下一個(gè)
Shift + Enter： 查找上一個(gè)
Esc： 關(guān)閉窗口

另外, 可以參考demo，使用全局快捷鍵來打開窗口。

new FindInPage(webContents, [options])

webContents Object(required) - 渲染進(jìn)程的webContents對(duì)象

options Object(optional)

preload Boolean - 創(chuàng)建實(shí)例的時(shí)候是否預(yù)加載查找窗口。 默認(rèn)為 false。

parentElement Object - 指定查找窗口的父級(jí)節(jié)點(diǎn)。 默認(rèn)為 document.body。

duration Number - 指定查找窗口顯示或隱藏的過渡周期。 默認(rèn)為 300 (ms)。

offsetTop Number - 指定查找窗口相對(duì)于父級(jí)定位元素頂部偏移量。 默認(rèn)為 5。

offsetRight Number - 指定查找窗口相對(duì)于父級(jí)定位元素右邊偏移量。 默認(rèn)為 5。

boxBgColor String - 配置查找窗口背景色。 默認(rèn)為 "#ffffff"。

boxShadowColor String - 配置查找窗口陰影色。 默認(rèn)為 "#909399"。

inputColor String - 配置輸入框文本顏色。 默認(rèn)為 "#606266"。

inputBgColor String - 配置輸入框背景顏色。 默認(rèn)為 "#f0f0f0"。

inputFocusColor String - 配置輸入框聚焦時(shí)的邊框顏色。 默認(rèn)為 "#c5ade0"。

textColor String - 配置查找窗口中文本顏色。 默認(rèn)為 "#606266"。

textHoverBgColor String - 配置鼠標(biāo)懸停文本時(shí)的背景色。 默認(rèn)為 "#eaeaea"。

caseSelectedColor String - 配置區(qū)分大小寫選項(xiàng)選中時(shí)的邊框顏色。 默認(rèn)為 "#c5ade0"。

使用new FindInPage 創(chuàng)建的實(shí)例具有以下方法:
?
findInPage.openFindWindow()
當(dāng)查找窗口關(guān)閉時(shí)，打開窗口。 當(dāng)查找窗口已經(jīng)打開時(shí)，聚焦輸入框。
?
findInPage.closeFindWindow()
關(guān)閉窗口。
?
findInPage.destroy()
關(guān)閉窗口，清除對(duì)象的引用，釋放內(nèi)存。
?
?
查看更多：https://github.com/TheoXiong/electron-find