element-ui组件DatePicker日期选择器移动端兼容

element-ui组件DatePicker日期选择器移动端兼容

css

css 复制代码
/** 移动端展示 **/
@media screen and (max-width: 500px) {
    .el-picker-panel__sidebar {
      width: 100%;
    }
    .el-picker-panel {
      width: 400px!important;
    }
    .el-picker-panel__content {
      width: 100%;
    }
    .el-picker-panel__body{
      margin-left: 0!important;
      display: flex;
      flex-direction: column;
      min-width: auto!important;
    }
    .el-picker-panel__sidebar {
      position: relative;
    }
    .el-picker-panel__body-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

注意不要给style标签加scoped属性会不生效

scoped作用

实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。

页面效果

相关推荐
程序员正茂6 小时前
Unity3d中Tab控件的实现
ui·unity·tab·控件
jz_ddk14 小时前
[LVGL] 从0开始,学LVGL:基础构建篇 - 掌握UI的核心构建块
linux·网络协议·ui·rpc·嵌入式·gui·lvgl
Rhys..14 小时前
python自动化中(包括UI自动化和API自动化)env的作用和使用
python·ui·自动化
尤老师FPGA19 小时前
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三十二讲)
android·java·ui
Larry_Yanan1 天前
QML学习笔记(三十四)QML的GroupBox、RadioButton
c++·笔记·qt·学习·ui
打码的猿2 天前
在Qt中实现SwitchButton(开关按钮)
开发语言·qt·ui
未来之窗软件服务2 天前
UI设计(三)按实际输出内容递增的序号效果——东方仙盟筑基期
ui·thinkphp·仙盟创梦ide·东方仙盟sdk
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
記億揺晃着的那天4 天前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
Larry_Yanan4 天前
QML学习笔记(三十一)QML的Flow定位器
java·前端·javascript·笔记·qt·学习·ui