實現(xiàn)一個輸入框，輸入信息后顯示由后臺返回的數(shù)據(jù)，供用戶選擇，之前用的elm的組件，不過那個有點大。。。簡單的情況下自己實現(xiàn)一個也能滿足要求。。。應(yīng)該吧。。。
主題包括一個input用于輸入，一個div用于展示數(shù)據(jù)，div里面是數(shù)據(jù)項item
當在input中按下回車時，會根據(jù)信息去后臺獲取數(shù)據(jù)，如果用戶點擊了別的地方，input失去焦點，則提示的div也應(yīng)該收起來
bug：
在blur事件中，如果直接將isShow設(shè)置為false會出問題，先失去焦點，顯示面板消失，所以你的點擊不會被監(jiān)聽到。。。設(shè)置一個計時器，在點擊之后10ms后將面板收起來，問題解決。。。
顯示div將內(nèi)容撐開，改變其他組件布局，設(shè)置div的屬性，即可，高度設(shè)為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>簡單實現(xiàn)代碼
<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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
