<p>如果你看看他们的自动完成组件：https://mui.com/material-ui/react-autocomplete/</p> <p>单击下拉列表中的建议后，输入框会保持焦点...他们是如何做到的？在我自己的 vue 应用程序（不使用材质 UI）中的每个变体中，我无法获取单击事件来阻止输入失去焦点。</p> <p>我已经尝试用谷歌搜索这个问题很长一段时间了，但没有看到明确的解决方案。例如，人们建议 mousedown/touchstart，但这会破坏滚动（通过拖动下拉菜单）。 MaterialUI显然没有这个问题，并且似乎没有使用mousedown。</p> <p>我尝试使用 Chrome 开发工具分析事件，但只能看到单个点击事件，但使用精简的代码很难判断发生了什么。</p> <p>Vuetify 也这样做：https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts</p> <p>如果有人遇到这个问题，我也发现这很有帮助https://codepen.io/Pineapple/pen/MWBVqGW</p> <p><strong>编辑</strong>这就是我正在做的事情：</p> <pre class="brush:html;toolbar:false;"> <app-input-autocomplete @autocomplete-select="onSelect" @autocomplete-close="onClose" :open="open"> <template #default="{ result }"> <div class="input-autocomplete-address"> {{ result.address }} </div> </template> </app-input-autocomplete> </pre> <p>然后在<code>app-input-autocomplete</code>中：</p> <pre class="brush:html;toolbar:false;"><template> <app-input @focus="onFocus" @blur="onBlur" v-bind="$attrs"> <template #underInput> <div ref="dropdown" v-show="open" class="input-autocomplete-dropdown"> <div class="input-autocomplete-results"> <div v-for="result in results" :key="result.id" @click="onClick(result)" class="input-autocomplete-result"> <slot :result="result" /> </div> </div> </div> </模板> </应用程序输入> </模板> <脚本> 从 'vue' 导入 { ref, toRef }; 从'@/components/AppInput.vue'导入AppInput； 从 '@vueuse/core' 导入 { onClickOutside }； 导出默认值{ 成分： { 应用程序输入， }, 继承属性：假， 道具： { 打开： { 类型：布尔值， 默认值：假， }, 结果： { 类型：数组， 默认值：() => ([]), }, }, 发出：['自动完成-关闭'，'自动完成-选择']， 设置（道具，{发射}）{ 常量下拉菜单 = ref(null); const open = toRef(props, '打开'); const 集中 = ref(false); onClickOutside(下拉菜单, () => { if (!focused.value && open.value) { 发出（'自动完成关闭'）； } }); 返回 { 落下， 专注, }; }, 方法： { onFocus() { this.focused = true; }, onBlur() { this.focused = false; }, onClick（结果）{ this.$emit('自动完成选择', 结果); }, }, }; </脚本> </pre></p>