ElementUI移动端日期范围选择器宽度溢出解决方案
ElementUI的日期范围选择器在移动端显示时，经常出现宽度溢出屏幕的问题。这是因为其弹出层宽度未受限。以下提供几种解决方法：
-
采用移动端专用组件库: 建议使用专为移动端设计的UI组件库，例如Vant或MUI。这些库通常提供更适配移动端的日期选择器，能有效避免宽度溢出。
-
禁用键盘输入: 通过设置
editable: false属性，禁止手动输入日期，从而避免键盘弹出导致的宽度问题。
- CSS样式调整: 您可以通过CSS样式调整弹出层的宽度。以下样式针对ElementUI日期范围选择器，请根据实际情况调整：
@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: 0;
padding: 5px;
}
.el-date-range-picker__content.is-left {
padding-bottom: 0;
}
.el-date-range-picker__content.is-right {
padding-top: 0;
}
.el-date-table th, .el-date-table td {
padding: 0;
}
}
重要提示: 因为ElementUI日期范围选择器的结构可能与#app同级，所以上述CSS样式需要确保不包含scoped属性，否则样式将无法生效。 请根据您的项目结构和ElementUI版本调整样式选择器。 如果问题依旧，请检查您的项目中是否存在其他样式冲突。
