[發(fā)明專利]一種下拉框組件

在審

• 申請?zhí)枺?/td>: 201811198003.5
• 申請日: 2018-10-15
• 公開（公告）號: CN109408056A
• 公開（公告）日: 2019-03-01
• 發(fā)明（設(shè)計）人: 胡一梟
• 申請（專利權(quán)）人: 四川長虹電器股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 成都虹橋?qū)＠聞?wù)所(普通合伙) 51124
• 代理人: 吳中偉

本發(fā)明涉及一種組件，其公開了提出一種下拉框組件，解決傳統(tǒng)技術(shù)中的Vue.js提供的下拉框select組件使用效率低下的問題。該下拉框組件，包括：查詢輸入模塊、數(shù)據(jù)捕獲模塊、下拉彈窗模塊、選項(xiàng)提取模塊、數(shù)據(jù)傳送模塊；本發(fā)明在用戶輸入同時捕獲輸入數(shù)據(jù)，并傳送至后臺，通過模糊查詢并自動彈出彈窗，在彈窗中展示模糊查詢的詞條，用戶單擊展示的詞條實(shí)現(xiàn)搜索。相比傳統(tǒng)的select組件可極大地提高使用效率。本發(fā)明適用于需要提供下拉框進(jìn)行查詢的網(wǎng)頁中。

技術(shù)領(lǐng)域

本發(fā)明涉及一種組件，具體涉及一種下拉框組件。

背景技術(shù)

作為一種構(gòu)建用戶界面的工具，毫無疑問Vue.js已經(jīng)是最流行的前端框架之一，它具有很多非常實(shí)用而便捷的功能性組件。在實(shí)際的開發(fā)過程中，下拉框選擇事件的使用率是很高的，需要調(diào)取后臺中即將顯示的下拉內(nèi)容，并將用戶的選擇傳送給后臺，進(jìn)行下一步的篩選和使用。

然而，傳統(tǒng)技術(shù)中的Vue.js提供的下拉框select組件只可直接顯示后臺數(shù)據(jù)，或者顯示前端定義好的數(shù)據(jù)，然后用戶選中某個數(shù)據(jù)，通過綁定的按鈕事件進(jìn)行查詢。由于需要綁定按鈕事件，常常不適用于具體的業(yè)務(wù)實(shí)現(xiàn)，達(dá)不到需求方所要求的效果，并且需要用戶點(diǎn)擊觸發(fā)下拉框，逐一查找需要的下拉內(nèi)容，其使用效率低下。

發(fā)明內(nèi)容

本發(fā)明所要解決的技術(shù)問題是：提出一種下拉框組件，解決傳統(tǒng)技術(shù)中的Vue.js提供的下拉框select組件使用效率低下的問題。

本發(fā)明解決上述技術(shù)問題所采用的技術(shù)方案是：一種下拉框組件，包括：

查詢輸入模塊，用于在組件運(yùn)行時提供查詢輸入窗口供用戶輸入查詢內(nèi)容；

數(shù)據(jù)捕獲模塊，用于在用戶輸入查詢內(nèi)容的同時，捕獲用戶當(dāng)前輸入的數(shù)據(jù)，提交給數(shù)據(jù)傳送模塊；

下拉彈窗模塊，用于根據(jù)后臺模糊查詢的數(shù)據(jù)自動彈出下拉彈窗，在彈窗中展示多個可供選擇的下拉項(xiàng)；

選項(xiàng)提取模塊，用于在用戶點(diǎn)擊彈窗中的某一個下拉項(xiàng)后，提取該下拉項(xiàng)的數(shù)據(jù)內(nèi)容提交給查詢輸入模塊在查詢輸入窗口中進(jìn)行顯示，同時將該下拉項(xiàng)的數(shù)據(jù)內(nèi)容提交給數(shù)據(jù)傳送模塊；

數(shù)據(jù)傳送模塊，用于調(diào)用后臺接口將捕獲用戶當(dāng)前輸入的數(shù)據(jù)傳送至后臺進(jìn)行模糊查詢，獲取后臺模糊查詢的數(shù)據(jù)，提交給下拉彈窗模塊；以及用于在獲取選項(xiàng)提取模塊提交的下拉項(xiàng)的數(shù)據(jù)內(nèi)容時調(diào)用后臺接口將所述數(shù)據(jù)內(nèi)容傳送給后臺以實(shí)現(xiàn)對應(yīng)的查詢操作。

作為進(jìn)一步優(yōu)化，所述下拉框組件被封裝后可進(jìn)行移植和復(fù)用。

作為進(jìn)一步優(yōu)化，所述彈窗中的每一個下拉項(xiàng)顯示后臺模糊查詢的一條與用戶當(dāng)前輸入匹配的數(shù)據(jù)內(nèi)容。

本發(fā)明的有益效果是：

本發(fā)明在用戶輸入同時捕獲輸入數(shù)據(jù)，并傳送至后臺，通過模糊查詢并自動彈出彈窗，在彈窗中展示模糊查詢的詞條，用戶單擊展示的詞條實(shí)現(xiàn)搜索。相比傳統(tǒng)的select組件可極大地提高使用效率。

另外，在對該組件進(jìn)行了封裝操作后，以便于它的移植和復(fù)用。當(dāng)前端開發(fā)人員需要實(shí)現(xiàn)這些功能的時候，只需在自己的前端代碼中進(jìn)行簡單的組件引用即可。極大的減少了項(xiàng)目開發(fā)過程中一些不得不做，但實(shí)際略嫌冗余的開發(fā)操作，提高了開發(fā)的效率。

具體實(shí)施方式

本發(fā)明旨在提出一種下拉框組件，解決傳統(tǒng)技術(shù)中的Vue.js提供的下拉框select組件使用效率低下的問題。本發(fā)明基于Vue.js技術(shù)，開發(fā)了一個簡潔方便的下拉框組件，實(shí)現(xiàn)了彈出下拉彈窗，展示下拉信息，點(diǎn)擊選擇事件的功能。用戶只需進(jìn)行非常簡單的操作即可達(dá)到目的。

本發(fā)明中的下拉框組件，包括：

查詢輸入模塊，用于在組件運(yùn)行時提供查詢輸入窗口供用戶輸入查詢內(nèi)容；