Vue組件 - 智能聯(lián)想輸入框

EscapedDog 發(fā)布于2019-08-22 11:07 / 1952人閱讀

摘要：但是現(xiàn)在框架，如的為了實(shí)現(xiàn)雙向數(shù)據(jù)綁定會(huì)重繪所有的元素，這樣就會(huì)難以兼容使用。所以筆者開(kāi)發(fā)了組件智能輸入框。后續(xù)需要完善的功能支持自定義分割符，添加參數(shù)支持?jǐn)?shù)據(jù)校驗(yàn)不合法的不允許輸入，添加參數(shù)完善接口文檔和補(bǔ)充在線測(cè)試用例

已經(jīng)有很多成熟的智能輸入框組件，如Form.js。但是現(xiàn)在MVVM框架，如vue、react的為了實(shí)現(xiàn)雙向數(shù)據(jù)綁定會(huì)重繪所有的元素，這樣就會(huì)難以兼容使用。所以筆者開(kāi)發(fā)了Vue組件-智能輸入框。

包含的功能大同小異：

獲得焦點(diǎn)時(shí)顯示所有備選項(xiàng)

失去焦點(diǎn)時(shí)隱藏備選項(xiàng)面板

輸入字符后，檢索可能的備選項(xiàng)

支持上下鍵和回車(chē)鍵進(jìn)行選中

支持點(diǎn)擊選中

支持多選

以逗號(hào)進(jìn)行多選的分割

更新日志 2019-06-10

取消依賴jQuery和bootstrap

上傳到github進(jìn)行代碼管理

增加示例文件和使用說(shuō)明

代碼托管

github地址：https://github.com/LeonSage/s...

示例: 圖1：組件化的調(diào)用

圖2：實(shí)際應(yīng)用的場(chǎng)景

依賴

依賴vue，可以使用CDN：https://cdnjs.cloudflare.com/...。

使用方式

在頁(yè)面中引入vue.js

在頁(yè)面中引入smartInput.js和smartInput.css

在你的頁(yè)面中建立vue對(duì)象：new Vue({el: "#root"})

在root根組件里直接添加標(biāo)簽即可調(diào)用該組件

# 調(diào)用組件

接口文檔

我們只需要在初始化的vue對(duì)象里設(shè)置好該組件需要的相關(guān)屬性即可生效：

provinceList: {
    list: ["北京市","天津市","上海市","重慶市","河北省","山西省","遼寧省","吉林省"],
    multiple: true,
    value: "我是初始值"
},

同時(shí)需要提供一個(gè)函數(shù)用于支持?jǐn)?shù)據(jù)收集和回傳：

methods: {
    // 跟智能輸入框同步選中的業(yè)務(wù)
    collectProvince(data) {
        console.log(data);
    }
}

暫時(shí)只支持這3個(gè)參數(shù)。

后續(xù)需要完善的功能:

支持自定義分割符，添加參數(shù)delimiter: "-"

支持?jǐn)?shù)據(jù)校驗(yàn)（不合法的不允許輸入），添加參數(shù)stric: true

完善接口文檔和補(bǔ)充在線測(cè)試用例

GPU云服務(wù)器云服務(wù)器 php輸入框聯(lián)想 vue組件 vue組件開(kāi)發(fā) vue父子組件通訊

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91814.html

相關(guān)文章

v-model

摘要：用法中比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件實(shí)例代碼這里是監(jiān)聽(tīng)了輸入框的事件，并將其賦值給。找到的父組件就是組件，里面沒(méi)有注冊(cè)任何方法只是了屬性。因?yàn)樵谝彩抢昧说恼Z(yǔ)法糖。 Vue v-model 用法 vue 中v-model 比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽(tīng) 用戶的輸入事件實(shí)例代碼 ...

RiverLi 2019-08-21 11:53 評(píng)論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長(zhǎng)假，把上篇剩下的部分也寫(xiě)一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開(kāi)始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。個(gè)人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 評(píng)論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長(zhǎng)假，把上篇剩下的部分也寫(xiě)一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開(kāi)始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。個(gè)人博客了解一下：obkoro...

suemi 2019-08-22 16:05 評(píng)論0 收藏0
手把手教你用jsx封裝Vue中的復(fù)雜組件（網(wǎng)易云音樂(lè)實(shí)戰(zhàn)項(xiàng)目需求）

摘要：終極解決方案所以我們要統(tǒng)一環(huán)境，直接使用渲染我們的組件，文檔可以參照音樂(lè)標(biāo)題歌手專(zhuān)輯時(shí)長(zhǎng)省去一些細(xì)節(jié)注意需要放在中，的透?jìng)饕膊灰?，這樣我們?cè)谕獠肯胧褂玫囊恍傩院褪录疟容^方便。背景介紹最近在做vue高仿網(wǎng)易云音樂(lè)的項(xiàng)目，在做的過(guò)程中發(fā)現(xiàn)音樂(lè)表格這個(gè)組件會(huì)被非常多的地方復(fù)用，而且需求比較復(fù)雜的和靈活。預(yù)覽地址源碼地址圖片預(yù)覽歌單詳情 showImg(https://se...

HitenDev 2019-08-26 10:28 評(píng)論0 收藏0
2017年TOP100summit15位大咖擔(dān)任聯(lián)席主席甄選最值得學(xué)習(xí)的100個(gè)研發(fā)案例

摘要：以下將分別從五大技術(shù)專(zhuān)場(chǎng)維度介紹本屆峰會(huì)的部分聯(lián)席主席與精選案例。天時(shí)間集中分享年最值得學(xué)習(xí)的個(gè)研發(fā)案例實(shí)踐。從萬(wàn)維網(wǎng)到物聯(lián)網(wǎng)，從信息傳播到人工智能，20年間軟件研發(fā)行業(yè)趨勢(shì)發(fā)生了翻天覆地的變化。大數(shù)據(jù)、云計(jì)算、AI等新興領(lǐng)域逐漸改變我們的生活方式，Devops、容器、深度學(xué)習(xí)、敏捷等技術(shù)方式和工作理念對(duì)軟件研發(fā)從業(yè)者提出更高要求。由麥思博（msup）有限公司主辦的第六屆全球軟件案...

andot 2019-06-26 18:17 評(píng)論0 收藏0