实现一个输入框,输入信息后显示由后台返回的数据,供用户选择,之前用的elm的组件,不过那个有点大。。。简单的情况下自己实现一个也能满足要求。。。应该吧。。。
主题包括一个input用于输入,一个div用于展示数据,div里面是数据项item
当在input中按下回车时,会根据信息去后台获取数据,如果用户点击了别的地方,input失去焦点,则提示的div也应该收起来
bug:
在blur事件中,如果直接将isShow设置为false会出问题,先失去焦点,显示面板消失,所以你的点击不会被监听到。。。设置一个计时器,在点击之后10ms后将面板收起来,问题解决。。。
显示div将内容撑开,改变其他组件布局,设置div的属性,即可,高度设为0,z-index很大,就不会改变其他组件位置
height: 0; z-index: 999;
<template> <div class="container"> <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/> <div class="select-panel"> <div v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w['content']}}</div> </div> </div> </template>
简单实现代码
<template> <div class="container"> <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/> <div class="select-panel"> <div v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w['content']}}</div> </div> </div> </template> <script> import {search_word} from "../api/word-api"; export default { name: "auto-complete", data() { return { msg: '', words: [], isShow: false } }, computed: {}, methods: { blur() { setTimeout(() => { this.isShow = false }, 200) }, async search() { console.log('search msg', this.msg) this.words = await search_word(this.msg) console.log(this.words) this.isShow = true }, click_item(w) { console.log('click word', w) this.$emit('add_word', w) } }, } </script> <style scoped> .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; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]