前言
-
概述：el-date-picker 组件会自动根据空间范围进行选择比较好的弹出位置，但特定情况下，它自动计算出的弹出位置并不符合我们的实际需求，故需要我们手动设置。
-
存在的问题：element-plus 中 el-date-picker 文档中并没有提供明确的属性供我们设置弹出位置。
-
解决方案：我们可以看到文档提供了
popper-options属性供我们去定制。详情设置可阅读 popper.js。
实际场景案例
-
原始状态，向左侧弹出
-
实际需求：下方弹出
-
代码设置
核心配置——popper-options文章来源：https://www.toymoban.com/news/detail-700142.html:popper-options="{ modifiers: [ { name: 'flip', options: { fallbackPlacements: ['bottom'], allowedAutoPlacements: ['bottom'], } } ] }"
完整代码：文章来源地址https://www.toymoban.com/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'],
}
}
]
}"
/>
- 最终效果
到了这里，关于element-plus 设置 el-date-picker 弹出框位置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
