<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>
</template>
</app-input>
</template>
<script>
import { ref, toRef } from 'vue';
import AppInput from '@/components/AppInput.vue';
import { onClickOutside } from '@vueuse/core';
export default {
components: {
AppInput,
},
inheritAttrs: false,
props: {
open: {
type: Boolean,
default: false,
},
results: {
type: Array,
default: () => ([]),
},
},
emits: ['autocomplete-close', 'autocomplete-select'],
setup(props, { emit }) {
const dropdown = ref(null);
const open = toRef(props, 'open');
const focused = ref(false);
onClickOutside(dropdown, () => {
if (!focused.value && open.value) {
emit('autocomplete-close');
}
});
return {
dropdown,
focused,
};
},
methods: {
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
},
onClick(result) {
this.$emit('autocomplete-select', result);
},
},
};
</script>
</pre></p>
1
1217
收藏
我通过执行以下操作解决了这个问题，感谢@Claies 提供的想法以及此链接：
https://codepen.io/Pineapple/pen/MWBVqGW
event.preventDefaultonmousedownopen = true