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()

# 開啓預加載選項，建立實例的時候會同時加載查找窗口相關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()
關閉窗口，清除對象的引用，釋放內存。
 
 
查看更多：https://github.com/TheoXiong/electron-find