Vue组件 - 智能联想输入框

EscapedDog 发布于2019-08-22 11:07 / 1789人阅读

摘要：但是现在框架，如的为了实现双向数据绑定会重绘所有的元素，这样就会难以兼容使用。所以笔者开发了组件智能输入框。后续需要完善的功能支持自定义分割符，添加参数支持数据校验不合法的不允许输入，添加参数完善接口文档和补充在线测试用例

已经有很多成熟的智能输入框组件，如Form.js。但是现在MVVM框架，如vue、react的为了实现双向数据绑定会重绘所有的元素，这样就会难以兼容使用。所以笔者开发了Vue组件-智能输入框。

包含的功能大同小异：

获得焦点时显示所有备选项

失去焦点时隐藏备选项面板

输入字符后，检索可能的备选项

支持上下键和回车键进行选中

支持点击选中

支持多选

以逗号进行多选的分割

更新日志 2019-06-10

取消依赖jQuery和bootstrap

上传到github进行代码管理

增加示例文件和使用说明

代码托管

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

示例: 图1：组件化的调用

图2：实际应用的场景

依赖

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

使用方式

在页面中引入vue.js

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

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

在root根组件里直接添加标签即可调用该组件

# 调用组件

接口文档

我们只需要在初始化的vue对象里设置好该组件需要的相关属性即可生效：

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

同时需要提供一个函数用于支持数据收集和回传：

methods: {
    // 跟智能输入框同步选中的业务
    collectProvince(data) {
        console.log(data);
    }
}

暂时只支持这3个参数。

后续需要完善的功能:

支持自定义分割符，添加参数delimiter: "-"

支持数据校验（不合法的不允许输入），添加参数stric: true

完善接口文档和补充在线测试用例

服务器托管 GPU服务器 php输入框联想 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91814.html

v-model

摘要：用法中比较基础的用法是在表单控件中，创建双向数据绑定，能够更新数据并负责监听用户的输入事件实例代码这里是监听了输入框的事件，并将其赋值给。找到的父组件就是组件，里面没有注册任何方法只是了属性。因为在也是利用了的语法糖。 Vue v-model 用法 vue 中v-model 比较基础的用法是在表单控件中，创建双向数据绑定，能够更新数据并负责监听用户的输入事件实例代码 ...

RiverLi 2019-08-21 11:53 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

suemi 2019-08-22 16:05 评论0 收藏0
手把手教你用jsx封装Vue中的复杂组件（网易云音乐实战项目需求）

摘要：终极解决方案所以我们要统一环境，直接使用渲染我们的组件，文档可以参照音乐标题歌手专辑时长省去一些细节注意需要放在中，的透传也不要忘了，这样我们在外部想使用的一些属性和事件才比较方便。背景介绍最近在做vue高仿网易云音乐的项目，在做的过程中发现音乐表格这个组件会被非常多的地方复用，而且需求比较复杂的和灵活。预览地址源码地址图片预览歌单详情 showImg(https://se...

HitenDev 2019-08-26 10:28 评论0 收藏0
2017年TOP100summit15位大咖担任联席主席甄选最值得学习的100个研发案例

摘要：以下将分别从五大技术专场维度介绍本届峰会的部分联席主席与精选案例。天时间集中分享年最值得学习的个研发案例实践。从万维网到物联网，从信息传播到人工智能，20年间软件研发行业趋势发生了翻天覆地的变化。大数据、云计算、AI等新兴领域逐渐改变我们的生活方式，Devops、容器、深度学习、敏捷等技术方式和工作理念对软件研发从业者提出更高要求。由麦思博（msup）有限公司主办的第六届全球软件案...

andot 2019-06-26 18:17 评论0 收藏0