Das a-select-Tag ist das Auswahlfeld in der Komponente. Sie können auf der offiziellen Website nachsehen, ob eine bestimmte Verwendung vorliegt. Hier sind die bei der Verwendung aufgetretenen Probleme.
Wenn Sie kürzlich an einem Projekt arbeiten, müssen Sie dem a-modal-Tag ein a-select-Tag hinzufügen. a-modal ist ein modales Dialogfeld, was bedeutet, dass dem modalen Dialogfeld ein Auswahlfeld hinzugefügt wird. Wenn Sie auf das Auswahlfeld klicken , wählen Sie das Element aus und scrollen Sie mit der Seite.
Beim Öffnen:
Nach dem Scrollen der Seite:
Dies geschieht nur, wenn sich die Maus über dem ausgewählten Element befindet, und es wird nicht angezeigt, wenn Sie den Mauszeiger an anderen Stellen bewegen.
Dann habe ich mir die Struktur der Seite angesehen, und das liegt daran, dass die Auswahl standardmäßig im Hauptteil gerendert wird.
Der Standort des a-select-Knotens:
Speicherort des Optionsmenüs:
Solange die Option auch im Tag id='app' platziert wird, kann dieses Problem vermieden werden.
Die Komponente stellt eine Eigenschaft bereit:
Fügen Sie das Attribut getPopupContainer="triggerNode => triggerNode.parentNode" zum Tag hinzu, um die Seitenstruktur zu ändern.
Und das Datumsauswahlfeld hat auch dieses Problem:
Die antdv-Komponente verwendete getPopupContainer in der dritten Version, jedoch getCalendarContainer vor der dritten Version.
<a-button style="margin-top: 50vh" type="primary" @click="showModal">Open Modal</a-button>
<a-modal :visible="isShowModal" @cancel="detailsTemplateModelClose" :closable="false" :keyboard="false":maskClosable="false" :confirm-loading="spinning":cancel-button-props="{ props: { disabled: spinning } }" cancelText="关闭" title="Modal" @ok="handleOk">
<a-select placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" :options="selectData"/>
<br>
<a-date-picker :value="value" :getCalendarContainer="triggerNode => triggerNode.parentNode" />
</a-modal>