封装组件之使用vue3封装input框并显示联想数据功能

新建Input.vue

定义input框及相关事件

 <input
      type="text"
      v-model="query"
      @input="onInput"
      @blur="hideSuggestions"
      @focus="onInput"
 />

@input输入事件、@blur失去焦点、@focus获取焦点

//当输入内容时才显示ul内容
const onInput = () => {
  showSuggestions.value = query.value.trim() !== '';
};

const hideSuggestions = () => {
  setTimeout(() => {
    showSuggestions.value = false;
  }, 200); // 延迟隐藏以允许选择建议
};

 

定义组件属性

const props = defineProps<{
  suggestions: string[];
}>();

ul标签是否显示

const showSuggestions = ref(false);

 <ul
      v-if="showSuggestions && filteredSuggestions.length"
      class="suggestions"
    >
      <li
        v-for="(suggestion, index) in filteredSuggestions"
        :key="index"
        @mousedown="selectSuggestion(suggestion)"
      >
        {{ suggestion }}
      </li>
    </ul>

进行筛选

const filteredSuggestions = computed(() => {
  if (query.value.trim() === '') {
    return [];
  }
  return props.suggestions.filter((suggestion) =>
    suggestion.toLowerCase().includes(query.value.toLowerCase())
  );
});

选中内容

//选中内容
const selectSuggestion = (suggestion: string) => {
  query.value = suggestion;
  showSuggestions.value = false;
};

其他组件使用

引入

import AutoInput from './components/Input.vue';

使用

const suggestionsList = [
  'apple',
  'banana',
  'orange',
  'grape',
  'pineapple',
  'mango',
  'strawberry',
];

 <div>
    <AutoInput :suggestions="suggestionsList"></AutoInput>
  </div>

效果

完整代码

Input.vue

<template>
  <div class="autocomplete">
    <input
      type="text"
      v-model="query"
      @input="onInput"
      @blur="hideSuggestions"
      @focus="onInput"
    />
    <ul
      v-if="showSuggestions && filteredSuggestions.length"
      class="suggestions"
    >
      <li
        v-for="(suggestion, index) in filteredSuggestions"
        :key="index"
        @mousedown="selectSuggestion(suggestion)"
      >
        {{ suggestion }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const props = defineProps<{
  suggestions: string[];
}>();

const query = ref('');
const showSuggestions = ref(false);

const filteredSuggestions = computed(() => {
  if (query.value.trim() === '') {
    return [];
  }
  return props.suggestions.filter((suggestion) =>
    suggestion.toLowerCase().includes(query.value.toLowerCase())
  );
});

//当输入内容时才显示ul内容
const onInput = () => {
  showSuggestions.value = query.value.trim() !== '';
};

const hideSuggestions = () => {
  setTimeout(() => {
    showSuggestions.value = false;
  }, 200); // 延迟隐藏以允许选择建议
};

//选中内容
const selectSuggestion = (suggestion: string) => {
  query.value = suggestion;
  showSuggestions.value = false;
};
</script>

<style scoped>
.autocomplete {
  position: relative;
  display: inline-block;
  width: 100%;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
//设置垂直滚动条
.suggestions {
  position: absolute;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  max-height: 150px;
  overflow-y: auto;
}
.suggestions li {
  padding: 8px;
  cursor: pointer;
}
//鼠标悬停改变背景颜色
.suggestions li:hover {
  background-color: #f0f0f0;
}
li {
  list-style-type: none;
}
</style>

 其他组件

<script setup lang="ts">
import AutoInput from './components/Input.vue';
const suggestionsList = [
  'apple',
  'banana',
  'orange',
  'grape',
  'pineapple',
  'mango',
  'strawberry',
];
</script>

<template>
  <div>
    <AutoInput :suggestions="suggestionsList"></AutoInput>
  </div>
</template>

<style scoped></style>