Bagaimanakah MaterialUI melakukan ini?
<p>Jika anda melihat komponen autolengkap mereka: https://mui.com/material-ui/react-autocomplete/</p>
<p>Kotak input mengekalkan fokus selepas mengklik pada cadangan dalam menu lungsur... Bagaimanakah mereka melakukannya? Dalam setiap varian dalam apl vue saya sendiri (tidak menggunakan UI bahan) saya tidak boleh mendapatkan acara klik untuk mengelakkan input daripada kehilangan fokus. </p>
<p>Saya telah lama mencuba google masalah ini tetapi tidak melihat penyelesaian yang jelas. Sebagai contoh, orang mencadangkan tetikus turun/mula sentuh, tetapi ini menghentikan penatalan (dengan menyeret menu lungsur). MaterialUI nampaknya tidak mempunyai masalah ini dan nampaknya tidak menggunakan mousedown. </p>
<p>Saya cuba menganalisis acara menggunakan Alat Pembangun Chrome tetapi saya hanya boleh melihat satu acara klik, tetapi dengan kod yang dilucutkan, sukar untuk mengetahui perkara yang berlaku. </p>
<p>Vuetify juga melakukan ini: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts</p>
<p>Jika sesiapa mengalami masalah ini, saya juga mendapati ini berguna https://codepen.io/Pineapple/pen/MWBVqGW</p>
<p><strong>Edit</strong>Inilah yang saya lakukan: </p>
<pre class="brush:html;toolbar:false;">
@autocomplete-select="onSelect"
@autocomplete-close="onClose"
:open="open">
<template #default="{ hasil }">
<div class="masukan-autolengkap-alamat">
{{ result. address }}
</div>
</template>
</app-input-autocomplete>
</pra>
<p>Kemudian dalam <kod>app-input-autocomplete</code>: </p>
<pre class="brush:html;toolbar:false;"><template>
<apl-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="hasil dalam keputusan" :key="result.id" @click="onClick(hasil)"input-autocomplete-hasil
<slot :result="hasil"
</div>
</div>
</div>
</template>
</app-input>
</template>
<skrip>
import { ref, toRef } daripada 'vue';
import AppInput daripada '@/components/AppInput.vue';
import { onClickOutside } daripada '@vueuse/core';
eksport lalai {
komponen: {
AppInput,
},
inheritAttrs: palsu,
alat peraga: {
buka: {
jenis: Boolean,
lalai: palsu,
},
keputusan: {
jenis: Susunan,
lalai: () => ([]),
},
},
memancarkan: ['autolengkap-tutup', 'autolengkap-pilih'],
persediaan(props, { emit }) {
const dropdown = ref(null);
const open = toRef(props, 'open');
const fokus = ref(false);
onClickOutside(dropdown, () => {
jika (!focused.value && open.value) {
emit('autocomplete-close');
}
});
kembali {
lungsur turun,
fokus,
};
},
kaedah: {
onFokus() {
ini.fokus = benar;
},
onBlur() {
ini.fokus = palsu;
},
onClick(hasil) {
this.$emit('autocomplete-select', result);
},
},
};
</skrip>
</pra></p>
