a-range-picker样式修改

最新推荐文章于 2024-05-20 09:19:28 发布

p g one

最新推荐文章于 2024-05-20 09:19:28 发布

阅读量1.7k

点赞数 5

分类专栏： vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_47711357/article/details/127926888

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.通过dropdownClassName添加class

1.通过dropdownClassName添加class
<a-range-picker  dropdownClassName="rangePickerIceGai" v-model:value="form.selectTime" show-time />

2.显示框的样式

在这里插入图片描述

<style scoped>
:deep(.ant-picker-range){
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
:deep(.ant-picker-input > input){
    color: var(--color-text);
}
:deep(.ant-picker-separator){
    color: var(--color-text);
}
:deep(.ant-picker-suffix){
    color: var(--color-text);
}
</style>

3.点击日期界面样式(注意：此处加入scoped无效),样式内的var()可以替换成例(#ffffff)

在这里插入图片描述

<style lang="scss">
    .rangePickerIceGai{
        background: none !important;
        .ant-picker-panel-container{
            background: var(--color-background);
            color: var(--color-text);
        }
        .ant-picker-panel{
            border: 1px solid var(--color-border);
        }
        .ant-picker-header{
            color: var(--color-text);
        }
        .ant-picker-content th,td{
            color: var(--color-text);
        }
        .ant-picker-content td:hover>.ant-picker-cell-inner{
            background: var(--color-background);
        }
        .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner, .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
            background: var(--color-border);
        }
        .ant-picker-cell-inner{
            background: var(--color-background);
        }
        .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner{
            color: var(--color-text);
        }
        .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
            background: var(--color-background-active);
        }
        .ant-picker-header{
            border-bottom: 1px solid var(--color-border);
        }
        .ant-picker-datetime-panel .ant-picker-time-panel{
            border-left: 1px solid var(--color-border);
        }
        .ant-picker-time-panel-column:not(:first-child){
            border-left: 1px solid var(--color-border);
        }
        .ant-picker-ok{
            background: var(--color-background);
            color: var(--color-text);
        }
        .ant-btn-primary[disabled], .ant-btn-primary[disabled]:hover, .ant-btn-primary[disabled]:focus, .ant-btn-primary[disabled]:active {
            color: #fff;
            border: none;
            background: var(--color-text-ploceholder);
            text-shadow: none;
            box-shadow: none;
        }
        .ant-picker-range-arrow::after{
            border-color: #C0C4CC #C0C4CC transparent transparent;
        }
    }
</style>