this.$set(item, 'active', false)
}
})
},
selectChildWidthArrowDown () {
// 判断index选中子项
if (this.currentIndex < this.typeaheadData.length) {
this.currentIndex++;
this.typeaheadData.map((item, index) => {
this.currentIndex === index ? this.$set(item, 'active', true) : this.$set(item, 'active', false);
})
}
},
selectChildWidthArrowUp () {
// 判断index选中子项
if (this.currentIndex > 0) {
this.currentIndex--;
this.typeaheadData.map((item, index) => {
this.currentIndex === index ? this.$set(item, 'active', true) : this.$set(item, 'active', false);
})
}
},
selectChildWidthEnter () {
// 若是结果集只有一个,则默认选中
if (this.typeaheadData.length === 1) {
this.$emit('update:asyncData', this.typeaheadData[0]); // emit响应的值
this.placeholderValue = this.typeaheadData[0][this.mapDataFormat.label];
} else {
// 若是搜索的内容完全匹配到项内的内容,则默认选中
this.typeaheadData.map(item => {
if (this.searchVal === item[this.mapDataFormat.label] || item.active === true) {
this.$emit('update:asyncData', item); // emit响应的值
this.placeholderValue = item[this.mapDataFormat.label];
}
})
}
this.isExpand = false;
},
selectChild (index) {
// 鼠标点击选择子项
this.typeaheadData.map((item, innerIndex) => {
if (index === innerIndex || item.active) {
this.placeholderValue = item[this.mapDataFormat.label];
this.$emit('update:asyncData', item); // emit响应的值
}
});
this.isExpand = false;
},
},
mounted () {
window.addEventListener('click', this.showHideMenu);
},
beforeDestroy () {
window.removeEventListener('click', this.showHideMenu);
},
watch: {
'isExpand' (newValue) {
if (newValue === false) {
this.resetDefaultStatus();
}
}
}
}
</script>
<style scoped lang="scss">
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active,
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
transition: opacity .2s linear;
}
.el-fade-in-enter,
.el-fade-in-leave-active,
.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active,
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0;
}
.noFound {
text-align: center;
}
.select-search {
position: relative;
z-index: 1000;
a {
color: #333;
text-decoration: none;
padding: 5px;
}
ul {
