对
element ui
中的el-autocomplete
中的上下键进行扩展,可上下键闭环滚动功能选择
关键对el-autocomplete进行监听上下键并处理
<template>
<div class="content">
<el-autocomplete
v-model="value"
ref="selectRemote"
placeholder="请输入关键词"
@select="handleSelect"
@input="update"
@keydown.down.native="nagtiveRow(highlightedIndex + 1)"
@keydown.up.native="nagtiveRow(highlightedIndex - 1)"
></el-utocomplete>
</div>
</template>
<script>
export default {
data() {
return {
value:"",
highlightedIndex: -1 // 用于标识上下键移动位置。input、select进行重置-1
};
},
methods: {
// 扩展autocomplete 上下键进行从头从尾
nagtiveRow(index) {
const selectRemote = this.$refs["selectRemote"];
this.highlightedIndex = index;
if (index < 0) {
this.highlightedIndex = this.options.length - 1;
} else if (index >= this.options.length) {
this.highlightedIndex = 0;
} else {
this.highlightedIndex = index;
}
selectRemote.highlight(this.highlightedIndex);
const suggestion = selectRemote.$refs.suggestions.$el.querySelector(
".el-autocomplete-suggestion__wrap"
);
const suggestionList = suggestion.querySelectorAll(
".el-autocomplete-suggestion__list li"
);
let highlightItem = suggestionList[this.highlightedIndex];
let offsetTop = highlightItem.offsetTop;
suggestion.scrollTop = offsetTop;
},
update(val) {
this.highlightedIndex = -1;
},
handleSelect(row) {
this.highlightedIndex = -1;
}
}
};
</script>