Vue組件 - 智能聯想輸入框

已經有不少成熟的智能輸入框組件，如Form.js。可是如今MVVM框架，如vue、react的爲了實現雙向數據綁定會重繪全部的元素，這樣就會難以兼容使用。因此筆者開發了Vue組件-智能輸入框。

包含的功能大同小異：

1. 得到焦點時顯示全部備選項
2. 失去焦點時隱藏備選項面板
3. 輸入字符後，檢索可能的備選項
4. 支持上下鍵和回車鍵進行選中
5. 支持點擊選中
6. 支持多選
7. 以逗號進行多選的分割

更新日誌

2019-06-10

1. 取消依賴jQuery和bootstrap
2. 上傳到github進行代碼管理
3. 增長示例文件和使用說明

代碼託管

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

示例:

圖1：組件化的調用

圖2：實際應用的場景

依賴

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

使用方式

1. 在頁面中引入vue.js
2. 在頁面中引入smartInput.js和smartInput.css
3. 在你的頁面中創建vue對象：new Vue({el: '#root'})
4. 在root根組件裏直接添加<smart-input>標籤便可調用該組件

# 調用組件
<smart-input :props="provinceList" @collect="collectProvince"></smart-input>

接口文檔

咱們只須要在初始化的vue對象裏設置好該組件須要的相關屬性便可生效：

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

同時須要提供一個函數用於支持數據收集和回傳：

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

暫時只支持這3個參數。

後續須要完善的功能:

1. 支持自定義分割符，添加參數delimiter: '-'
2. 支持數據校驗（不合法的不容許輸入），添加參數stric: true
3. 完善接口文檔和補充在線測試用例