<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, '開啟'); 常數聚焦 = ref(false); onClickOutside(下拉式選單, () => { if (!focused.value && open.value) { 發出（'自動完成關閉'）； } }); 返回 { 落下， 專注, }; }, 方法： { onFocus() { this.focused = true; }, onBlur() { this.focused = false; }, onClick（結果）{ this.$emit('自動完成選擇', 結果); }, }, }; </腳本> </pre></p>