在使用a-date-picker組件時會出現如下的情況,時間選擇面板只會展示在上方超出瀏覽器頂部的部分會被遮蓋的問題:
可以使用getCalendarContainer屬性來解決
<a-date-picker
v-model="baseInfo.birthday"
type="date"
:disabled-date="disabledDate"
placeholder="請選擇出生日期"
style="width: 100%;"
:getCalendarContainer="getCalendarContainer()"
@change="(mom, value) => setTime(value, 'birthday')"
/>
getCalendarContainer() {
return triggerNode => triggerNode.parentNode;
}
但是在嵌套在a-form-model-item組件中時結構如下的話設置getCalendarContainer屬性不會生效,可以在組件外層添加一個div元素來解決;
<a-form-model-item label="戶籍性質" prop="domiciliaryNature">
<a-date-picker
v-model="baseInfo.birthday"
type="date"
:disabled-date="disabledDate"
placeholder="請選擇出生日期"
style="width: 100%;"
:getCalendarContainer="getCalendarContainer()"
@change="(mom, value) => setTime(value, 'birthday')"
/>
</a-form-model-item>
解決時的代碼結構:
<a-form-model-item class="birthday" label="出生日期" ref="birthday" prop="birthday">
<div>
<a-date-picker
v-model="baseInfo.birthday"
type="date"
:disabled-date="disabledDate"
placeholder="請選擇出生日期"
style="width: 100%;"
:getCalendarContainer="getCalendarContainer()"
@change="(mom, value) => setTime(value, 'birthday')"
/>
</div>
</a-form-model-item>
解決后的效果如下: