ElementUI date-picker 组件在移动端上宽度超出屏幕宽度?

作者站长头像
站长
· 阅读数 22

ElementUI date-picker组件类型为时间范围时,在移动端上宽度超出屏幕宽度,应该如何设置?

在官网没有看到对弹出部分进行设置的相关说明ElementUI date-picker 组件在移动端上宽度超出屏幕宽度?

回复
1个回答
avatar
test
2024-06-24

建议使用专用的移动端组件库, 下面的你可以试试:

<el-date-picker v-model="timeScope" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :editable="false" @change=""></el-date-picker>

:editable="false" 是移动端禁止键盘弹出

@media (max-width: 768px) {
            .el-date-range-picker .el-picker-panel__body {
                min-width: 100%;
            }
            .el-date-range-picker__content{
                width: 100% !important;
            }
            .el-date-range-picker{
                width: 80% !important;
            }
            .el-date-range-picker__content{
                margin: 0px;
                padding: 5px;
            }
            .el-date-range-picker__content.is-left{
                padding-bottom: 0px;
            }
            .el-date-range-picker__content.is-right {
                padding-top: 0px;
            }
            .el-date-table th{
                padding: 0px;
            }
            .el-date-table td{
                padding: 0px;
            }
        }

因为这个组件的结构是与#app同级别的:answer image因此需要在全局或者使用的组件style标签不能加scoped属性

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容