修改element-ui中时间选择器的样式

最新推荐文章于 2024-06-04 14:44:19 发布

甜甜凉白开

最新推荐文章于 2024-06-04 14:44:19 发布

阅读量3.9k

点赞数 1

分类专栏：前端文章标签： vue.js less

原文链接：https://blog.csdn.net/weixin_44080648/article/details/109311076

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一般项目中如果设置了scoped属性，可以通过>>>或者/deep/来修改其他第三方组件的样式。

但是elementUI的时间选择器el-date-picker是将元素直接挂载到页面的<body>中，而非自身元素下，所以使用/deep/穿透也是无法定位到元素的。

两种思路：

一是查询elementUI的配置项文档，看看能不能将时间选择器挂载到其元素自身下面，而非<body>中，这样就能通过>>>或者/deep/来修改其样式；

二同样是查询elementUI的配置项文档【官方文档很重要！】，看看是否能够其设置单独的样式，且不会影响项目中其他的时间选择器样式。

1.定义在自己的样式下进行修改，<style lang="scss" scoped>，加上scoped之后就只在自己的页面生效，不影响其他人的样式。

2.如果很难改的动，放在自己页面中怎么都不生效的那种，而且是大家都用的这种就可以定义一个less文件，在main.js中引入，然后直接在自己的页面绑定定义的样式即可。

首先，定义date.less文件。

.mydatestyle{
    border: none !important;
    .el-picker-panel__body-wrapper{
        background: url(./img_wb/date.png) no-repeat;
        background-size: 100% 100%;
    }
    .el-picker-panel__sidebar{
        border: none;
        background: none !important;
    }
    .el-date-range-picker__header{
        color: white;
    }
    .el-date-range-picker__content.is-left{
        border-right: none;
    }
    .el-picker-panel__content .el-date-range-picker__.content .is-right{
        border: none;
        background: none !important;
    }
    .el-date-table td.next-month, .el-date-table td.prev-month{
        color: aliceblue;
    }
    .el-date-table td span{
        color: white;
    }
    .el-date-table th{
        color: white;
        border-bottom: none;
    }
    .el-picker-panel__icon-btn{
        color: white;
    }
    .el-picker-panel__shortcut{
        color: white;
    }
    .el-date-table td.in-range div{
        background-color: #223a5f;
    }
}

然后，在main.js中引入。

import "./assets/date.less";

然后，项目中使用，利用时间选择器的popper-class属性，给其设置样式。

<el-date-picker

              popper-class="mydatestyle"

              v-model="timeValue"

              type="daterange"

              align="right"

              unlink-panels

              value-format="yyyy-MM-dd"

              range-separator="至"

              start-placeholder="开始日期"

              end-placeholder="结束日期"

              :picker-options="pickerOptions"

            >

            </el-date-picker>

感谢lulululuq

原文链接：https://blog.csdn.net/weixin_44080648/article/details/109311076