建站
咨詢
售后
建站咨詢
新聞中心
Electron頁內(nèi)查找模塊介紹（代碼示例）？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
實現(xiàn)Electron app頁內(nèi)按關(guān)鍵字查找匹配文本的功能
特征
依賴于Electron的findInPage API
支持使用者靈活配置UI界面
支持區(qū)分大小寫
當(dāng)用戶輸入時自動查找
查找輸入框文本隔離，不會被匹配到
支持以下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'
# 使用默認配置來創(chuàng)建實例
let findInPage = new FindInPage(remote.getCurrentWebContents())
findInPage.openFindWindow()
# 開啟預(yù)加載選項，創(chuàng)建實例的時候會同時加載查找窗口相關(guān)dom
let findInPage = new FindInPage(remote.getCurrentWebContents(), {
preload: true
})
findInPage.openFindWindow()
# 配置父節(jié)點元素, 默認為 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()
# 配置查找窗口相對于父級定位節(jié)點的偏移量
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： 關(guān)閉窗口
另外, 可以參考demo，使用全局快捷鍵來打開窗口。
API
類: FindInPage
new FindInPage(webContents, [options])
webContents Object(required) - 渲染進程的webContents對象
options Object(optional)
preload Boolean - 創(chuàng)建實例的時候是否預(yù)加載查找窗口。 默認為 false。
parentElement Object - 指定查找窗口的父級節(jié)點。 默認為 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 - 配置區(qū)分大小寫選項選中時的邊框顏色。 默認為 "#c5ade0"。
實例方法
使用new FindInPage 創(chuàng)建的實例具有以下方法:
findInPage.openFindWindow()
當(dāng)查找窗口關(guān)閉時，打開窗口。 當(dāng)查找窗口已經(jīng)打開時，聚焦輸入框。
findInPage.closeFindWindow()
關(guān)閉窗口。
findInPage.destroy()
關(guān)閉窗口，清除對象的引用，釋放內(nèi)存。
感謝各位的閱讀！看完上述內(nèi)容，你們對Electron頁內(nèi)查找模塊介紹（代碼示例）大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文名稱：Electron頁內(nèi)查找模塊介紹（代碼示例）-創(chuàng)新互聯(lián)
當(dāng)前地址：http://www.dlmjj.cn/article/gchee.html
