MaterialUI는 이를 어떻게 수행합니까?
P粉916760429
2023-09-04 18:17:31
<p>자동완성 구성요소를 살펴보면: https://mui.com/material-ui/react-autocomplete/</p>
<p>드롭다운에서 제안을 클릭한 후에도 입력 상자에 초점이 유지됩니다. 어떻게 그렇게 합니까? 내 자신의 vue 앱(머티리얼 UI를 사용하지 않음)의 모든 변형에서 입력이 포커스를 잃지 않도록 클릭 이벤트를 얻을 수 없습니다. </p>
<p>이 문제를 오랫동안 Google에서 검색해 보았지만 명확한 해결책을 찾지 못했습니다. 예를 들어 사람들은 mousedown/touchstart를 제안했지만 이로 인해 스크롤이 중단되었습니다(드롭다운을 드래그하여). MaterialUI에는 분명히 이 문제가 없으며 mousedown을 사용하지 않는 것 같습니다. </p>
<p>Chrome 개발자 도구를 사용하여 이벤트 분석을 시도했지만 단 한 번의 클릭 이벤트만 볼 수 있지만, 제거된 코드로는 무슨 일이 일어나고 있는지 파악하기 어렵습니다. </p>
<p>Vuetify도 이 작업을 수행합니다: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/comComponents/VAutocomplete/VAutocomplete.ts</p>
<p>이 문제가 있는 사람이 있으면 이 https://codepen.io/Pineapple/pen/MWBVqGW</p>도 도움이 됩니다.
<p><strong>수정</strong>제가 하고 있는 일은 다음과 같습니다.</p>
<pre class="brush:html;toolbar:false;">
@autocomplete-select="onSelect"
@autocomplete-close="onClose"
:open="열기">
<템플릿 #기본="{ 결과 }">
<div class="input-autocomplete-address">
{{ 결과.주소 }}
</div>
</템플릿>
</app-input-autocomplete>
</pre>
<p>그런 다음 <code>app-input-autocomplete</code>에서: </p>
<pre class="brush:html;toolbar:false;"><템플릿>
<앱 입력
@focus="onFocus"
@blur="onBlur"
v-bind="$attrs">
<템플릿 #underInput>
<div ref="dropdown" v-show="open" class="input-autocomplete-dropdown">
<div class="input-autocomplete-results">
<div v-for="결과 결과" :key="result.id" @click="onClick(result)"
<슬롯:결과="결과"
</div>
</div>
</div>
</템플릿>
</앱 입력>
</템플릿>
<스크립트>
'vue'에서 { ref, toRef } 가져오기;
'@/comComponents/AppInput.vue'에서 AppInput을 가져옵니다.
'@vueuse/core'에서 { onClickOutside }를 가져옵니다.
기본값 내보내기 {
구성요소: {
앱 입력,
},
상속 속성: 거짓,
소품: {
열려 있는: {
유형: 부울,
기본값: 거짓,
},
결과: {
유형: 배열,
기본값: () => ([]),
},
},
방출: ['autocomplete-close', 'autocomplete-select'],
setup(props, { 방출 }) {
const 드롭다운 = ref(null);
const open = toRef(props, 'open');
const 집중 = ref(false);
onClickOutside(dropdown, () => {
if (!focused.value && open.value) {
Emit('자동완성-닫기');
}
});
반품 {
쓰러지 다,
집중하고,
};
},
방법: {
온포커스() {
this.focused = 사실;
},
onBlur() {
this.focused = 거짓;
},
onClick(결과) {
this.$emit('autocomplete-select', result);
},
},
};
</스크립트>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
아이디어와 이 링크를 제공해 주신 @Claies에게 감사드리며 다음을 수행하여 이 문제를 해결했습니다.
https://codepen.io/Pineapple/pen/MWBVqGW
event.preventDefaultonmousedownopen = true