本篇文章给大家分享的是有关vue中怎么实现一个自动补全的输入框，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
显示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 {
z-index: 999;
margin: 1px;
padding: 2px;
background: #fff;
opacity: 0.8;
}
</style>以上就是vue中怎么实现一个自动补全的输入框，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。
