ant design vue 時間選擇器組件(a-date-picker)時間選擇面板展示位置問題


在使用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>

解決后的效果如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM