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. 完善接口文档和补充在线测试用例