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

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

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

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

包含的功能大同小異：

獲得焦點時顯示所有備選項

失去焦點時隱藏備選項面板

輸入字符后，檢索可能的備選項

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

支持點擊選中

支持多選

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

更新日志 2019-06-10

取消依賴jQuery和bootstrap

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

增加示例文件和使用說明

代碼托管

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

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

圖2：實際應(yīng)用的場景

依賴

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

使用方式

在頁面中引入vue.js

在頁面中引入smartInput.js和smartInput.css

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

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

# 調(diào)用組件

接口文檔

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

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

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

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

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

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

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

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

完善接口文檔和補充在線測試用例

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91814.html

相關(guān)文章

v-model

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

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

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

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

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

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

摘要：終極解決方案所以我們要統(tǒng)一環(huán)境，直接使用渲染我們的組件，文檔可以參照音樂標(biāo)題歌手專輯時長省去一些細(xì)節(jié)注意需要放在中，的透傳也不要忘了，這樣我們在外部想使用的一些屬性和事件才比較方便。背景介紹最近在做vue高仿網(wǎng)易云音樂的項目，在做的過程中發(fā)現(xiàn)音樂表格這個組件會被非常多的地方復(fù)用，而且需求比較復(fù)雜的和靈活。預(yù)覽地址源碼地址圖片預(yù)覽歌單詳情 showImg(https://se...

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

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

andot 2019-06-26 18:17 評論0 收藏0