elementui date-picker组件移动端适配详解
ElementUI的Date-Picker组件在移动端使用范围选择时，经常出现宽度超出屏幕的问题。本文提供有效的解决方案。
官方文档未提供针对弹出部分的样式定制选项。建议优先考虑使用更适合移动端的UI组件库。
以下代码示例展示了如何使用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;
}
.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, .el-date-table td {
padding: 0px;
}
}
需要注意的是，由于Date-Picker组件通常与#app元素同级，因此无法在组件的style标签中使用scoped属性。 以上CSS代码需要全局应用。
