这篇文章主要介绍了vue 简单自动补全的输入框的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实现一个输入框，输入信息后显示由后台返回的数据，供用户选择，之前用的elm的组件，不过那个有点大。。。简单的情况下自己实现一个也能满足要求。。。应该吧。。。
主题包括一个input用于输入，一个div用于展示数据，div里面是数据项item
当在input中按下回车时，会根据信息去后台获取数据，如果用户点击了别的地方，input失去焦点，则提示的div也应该收起来
bug：
在blur事件中，如果直接将isShow设置为false会出问题，先失去焦点，显示面板消失，所以你的点击不会被监听到。。。设置一个计时器，在点击之后10ms后将面板收起来，问题解决。。。
显示div将内容撑本文来源gaodai$ma#com搞$代*码网2开，改变其他组件布局，设置div的属性，即可，高度设为0，z-index很大，就不会改变其他组件位置
height: 0; z-index: 999;
<div class="container"> <div class="select-panel"> <div class="select-item">{{w['content']}}</div></div></div>
简单实现代码
<div class="container"> <div class="select-panel"> <div class="select-item">{{w['content']}}</div></div></div> .container { display: flex; flex-grow: 0; flex-shrink: 0; box-sizing: border-box; } .msg { margin: 5px; } .select-panel { height: 0; z-index: 999; } .select-item { /*height: 0;*/ z-index: 999; margin: 1px; padding: 2px; background: #fff; opacity: 0.8; }
以上就是vue 简单自动补全的输入框的示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue 简单自动补全的输入框的示例
转载请注明原文链接：vue 简单自动补全的输入框的示例
