若依前端vue实现 输入框下拉选择加搜索用户

要在Vue中实现输入框下拉选择加搜索用户的功能，可以使用组件库如Element UI或者Vuetify，也可以自己手写一个组件。以下是一个简单的自定义组件示例，使用Vue和Element UI创建：

1. 首先确保Element UI已经安装并在项目中正确配置。
2. 创建一个Vue组件，例如UserSelect.vue。

<template>
  <el-popover
    ref="popover"
    placement="bottom"
    trigger="manual"
    v-model="visible"
  >
    <el-input
      slot="reference"
      v-model="inputValue"
      @focus="handleFocus"
      @blur="handleBlur"
      @input="handleInput"
      placeholder="请选择用户"
    ></el-input>
    <el-scrollbar style="height: 200px;">
      <el-option
        v-for="user in filteredUsers"
        :key="user.id"
        :label="user.name"
        :value="user.id"
        @click.native="selectUser(user)"
      ></el-option>
    </el-scrollbar>
  </el-popover>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: '',
      visible: false,
      users: [
        // 这里填充你的用户数据
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        // ...更多用户
      ],
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user =>
        user.name.toLowerCase().includes(this.inputValue.toLowerCase())
      );
    },
  },
  methods: {
    handleFocus() {
      this.visible = true;
    },
    handleBlur() {
      setTimeout(() => {
        this.visible = false;
      }, 200); // 延迟关闭，防止点击选项时关闭
    },
    handleInput() {
      if (this.visible) {
        // 如果下拉面板已打开，则更新用户列表
      }
    },
    selectUser(user) {
      this.inputValue = user.name;
      this.visible = false;
      // 处理选中用户的逻辑...
    },
  },
};
</script>

3. 在父组件中注册并使用UserSelect组件。

<template>
  <div>
    <user-select></user-select>
  </div>
</template>
 
<script>
import UserSelect from './UserSelect.vue';
 
export default {
  components: {
    UserSelect,
  },
};
</script>

这个组件使用了Element UI的el-popover来实现下拉面板，el-input作为输入框，el-scrollbar用于滚动显示用户列表，el-option表示每个用户选项。通过计算属性filteredUsers实现了用户搜索功能。在实际应用中，你需要将用户数据替换为实际的数据源，并处理选中用户后的逻辑。