ElementUI移动端日期范围选择器宽度溢出解决方案

ElementUI的日期范围选择器在移动端显示时，经常出现宽度溢出屏幕的问题。这是因为其弹出层宽度未受限。以下提供几种解决方法：

1. 采用移动端专用组件库: 建议使用专为移动端设计的UI组件库，例如Vant或MUI。这些库通常提供更适配移动端的日期选择器，能有效避免宽度溢出。

   

   CSS婚礼策划服务机构宣传网站模板

   CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

   下载

2. 禁用键盘输入: 通过设置editable: false属性，禁止手动输入日期，从而避免键盘弹出导致的宽度问题。

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

3. 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版本调整样式选择器。 如果问题依旧，请检查您的项目中是否存在其他样式冲突。