electron find

電子發現

英語 | 簡體中文

介紹

在電子應用程式中尋找文字的所有符合項

特徵

• 依賴 Electron 的 findInPage 的 API
• 支援使用者配置查找介面UI
• 支援區分大小寫
• 當使用者輸入改變時自動尋找
• find介面與電子視圖分離
• 支援電子版本^1.8.0、^2.0.0、^3.0.0、^4.0.0
• 支援Windows、Linux、Mac平台

示範

預設使用者介面

自訂使用者介面

安裝

 $   npm install electron-find --save

用法

 # import module
import { remote, ipcRenderer } from 'electron'
import { FindInPage } from 'electron-find'

# create instance of FindInPage with default config
let findInPage = new FindInPage(remote.getCurrentWebContents())
findInPage.openFindWindow()

# use preload option, the find interface will be loaded when create instance
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  preload: true
})
findInPage.openFindWindow()

# config parentElement of find interface, default is document.body
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  parentElement: document.querySelector('#id')
})
findInPage.openFindWindow()

# config duration of find interface moving, default is 300 (ms)
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  duration: 200
})
findInPage.openFindWindow()

# config offset relative to parentElement
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  offsetTop: 20,
  offsetRight: 30
})
findInPage.openFindWindow()

# config UI of find interface 
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
  boxBgColor: '#333',
  boxShadowColor: '#000',
  inputColor: '#aaa',
  inputBgColor: '#222',
  inputFocusColor: '#555',
  textColor: '#aaa',
  textHoverBgColor: '#555',
  caseSelectedColor: '#555'
})
findInPage.openFindWindow()

# there is a simply demo for reference
npm install
npm run dev

# there is another example with webview
npm install
npm run dev:webview

捷徑

鍵	功能
進入	找到下一個
Shift + Enter	找回來
Esc鍵	關閉

此外，您還可以註冊全域快捷方式來開啟查找窗口，就像演示一樣。

應用程式介面

類別：在頁面中尋找

new FindInPage(webContents, [options])

• webContents Object(必填) - 渲染器程序的 webContents
• options物件（可選）
  • preload Boolean - 建立實例時是否載入查找介面。預設為false 。
  • parentElement物件 - 指定查找介面的父 dom。預設為document.body 。
  • duration Number - 指定查找視窗開啟或關閉時的移動時間。預設值為300 （毫秒）。
  • offsetTop Number - 指定相對於parentElement 頂部的偏移量。預設值為5 。
  • offsetRight Number - 指定相對於parentElement 右側的偏移量。預設值為5 。
  • boxBgColor String - 指定尋找介面的背景顏色。預設為"#ffffff" 。
  • boxShadowColor String - 指定尋找介面的陰影顏色。預設為"#909399" 。
  • inputColor String - 指定輸入表單的文字顏色。預設值為“#606266”。
  • inputBgColor String - 指定輸入表單的背景顏色。預設為"#f0f0f0" 。
  • inputFocusColor String - 指定對焦時輸入表單的邊框顏色。預設為"#c5ade0" 。
  • textColor String - 指定尋找介面中文字的顏色。預設為"#606266" 。
  • textHoverBgColor String - 指定懸停時尋找介面中文字的背景顏色。預設為"#eaeaea" 。
  • caseSelectedColor String - 指定選取時 matchCase 按鈕的邊框顏色。預設為"#c5ade0" 。

實例方法

使用 new FindInPage 建立的物件具有以下實例方法：

findInPage.openFindWindow()
當查找視窗關閉時打開它。當查找視窗開啟時，聚焦輸入表單。

findInPage.closeFindWindow()
查找視窗開啟後將其關閉。

findInPage.destroy()
關閉查找窗口，並釋放記憶體。