移动端ElementUI date-picker组件宽度超出屏幕怎么办？

ElementUI date-picker 组件移动端适配方案

在移动端使用ElementUI的date-picker组件时，常常会遇到宽度溢出屏幕的问题。本文提供几种解决方法：

方法一：禁用编辑功能

通过设置 :editable="false" 属性，禁止组件的编辑功能，避免因键盘弹出而导致宽度溢出。

方法二：自定义CSS样式

针对移动端屏幕宽度，使用媒体查询调整组件样式：

@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; }
  /*  根据实际情况添加更多样式调整 */
}

方法三：其他优化建议

• 为了获得更好的移动端体验，建议考虑使用专门的移动端UI组件库。
• 确保CSS样式不包含scoped属性，避免样式作用范围受限。

选择适合您项目的方法，即可有效解决ElementUI date-picker组件在移动端的宽度问题。