基于element-ui 2.x版本input写的input模糊查询组件
最近做项目中,用到了input框中的模糊查询,由于项目中用到了element-ui,于是就去查看了当中的selecct组件,其中通过添加 filterable remote reserve-keyword remote-method 等相关属性即可实现模糊查询效果,自己也根据效果写了基于 el-input 的模糊查询效果,相关组件代码如下:
<template> <!-- 基于element-ui2.x版本input写的input模糊查询组件 --> <div> <div ref="selectOption"> <el-input v-model="selectInputVal" :placeholder="placeholder" @input="inputHandle" ></el-input> <ul class="options" v-if="optionsList.length && selectInputVal.length > 0" :style="'width:' + selectOptionWidth + 'px;top:' + selectOptionTop + 'px'" > <li v-for="item in optionsList" :key="item.id" @click="clickOption(item)" > {{ item.label }} </li> </ul> </div> </div> </template> <script> export default { data() { return { selectInputVal: this.value, selectOptionWidth: 0, selectOptionTop: 0, }; }, methods: { getOptionsOffset() { this.selectOptionWidth = this.$refs.selectOption.children[0].offsetWidth; this.selectOptionTop = this.$refs.selectOption.children[0].offsetHeight; }, inputHandle(value) { this.$emit("selectInputHandle", value); }, clickOption(info) { this.$emit("selectOptionItem", info); }, inputBlurHandle() { this.$emit("selectBlurHandle"); }, }, created() {}, mounted() { this.getOptionsOffset(); document.addEventListener("click", this.inputBlurHandle); }, props: { value: { default: "", }, placeholder: { type: String, default: "", }, optionsList: { type: Array, default: () => [], }, }, watch: { value(val) { this.selectInputVal = val; }, }, beforeDestroy() { document.removeEventListener("click", this.inputBlurHandle); }, }; </script> <style scoped> * { margin: 0; padding: 0; list-style: none; } ul.options { position: absolute; left: 0; border: 1px solid #dcdfe6; border-radius: 4px; z-index: 99999; background-color: #fff; box-sizing: border-box; max-height: 300px; overflow-y: auto; } li { cursor: pointer; border-bottom: 1px solid #dcdfe6; user-select: none; } li:hover { background-color: #dcdfe6; } li:last-child { border-bottom: none; } </style>