前言
-
概述：el-date-picker 組件會(huì)自動(dòng)根據(jù)空間范圍進(jìn)行選擇比較好的彈出位置，但特定情況下，它自動(dòng)計(jì)算出的彈出位置并不符合我們的實(shí)際需求，故需要我們手動(dòng)設(shè)置。
-
存在的問(wèn)題：element-plus 中 el-date-picker 文檔中并沒(méi)有提供明確的屬性供我們?cè)O(shè)置彈出位置。
-
解決方案：我們可以看到文檔提供了
popper-options屬性供我們?nèi)ザㄖ?。詳情設(shè)置可閱讀 popper.js。
實(shí)際場(chǎng)景案例
-
原始狀態(tài)，向左側(cè)彈出
-
實(shí)際需求：下方彈出
-
代碼設(shè)置
核心配置——popper-options文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-700142.html:popper-options="{ modifiers: [ { name: 'flip', options: { fallbackPlacements: ['bottom'], allowedAutoPlacements: ['bottom'], } } ] }"
完整代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-700142.html
<el-date-picker
v-model="timeRange"
type="datetimerange"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
:clearable="false"
prefixIcon=""
:popper-options="{
modifiers: [
{
name: 'flip',
options: {
fallbackPlacements: ['bottom'],
allowedAutoPlacements: ['bottom'],
}
}
]
}"
/>
- 最終效果
到了這里，關(guān)于element-plus 設(shè)置 el-date-picker 彈出框位置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
