vue-element-ul 日历组件的一些调试

有一个界面需要用到日历组件，于是用了element-ul Calendar组件

但是我发现文档好少啊，只有几行子

但是我要实现不少功能于是各种查资料，东拼西凑实现了需求

现在做一个集锦

1.2021年10月标题实现居中

 // 修改表头
            /deep/ .el-calendar__header {
                justify-content: center;
            }

2.2021年10月标题修改样式

 /deep/ .el-calendar__header {
               //修改字体颜色
                .el-calendar__title {
                    color: #fff;
                }
            }

3.右上角调整月份的按钮隐藏

这个按钮功能有限，我用了element的日期选择器，所以这个不需要了

 /deep/ .el-calendar__button-group {
                display: none;
            }

4.隐藏上个月和下个月的日期

日历默认会承上启下，并且点击上个月的日期会跳到上个月 可以取消这个点击事件并且使其隐藏

/deep/ .el-calendar-table {         
                &:not(.is-range) {
                    //使不是本月的日期不可点击，不会跳转到其他月份
                    td.next {
                        pointer-events: none;
                        visibility: hidden;
                    }
                    td.prev {
                        pointer-events: none;
                        visibility: hidden;
                    }
                }
            }

5.修改浮动

当鼠标放到日期单元格时会有浮动变色，默认是淡蓝色

如果需要修改

 // 修改日历浮动
            /deep/ .el-calendar-table .el-calendar-day {
                &:hover {
                    background: none;
                }
            }

6.修改选中

当你点击后会有选中效果

可以修改它

 // 修改选中效果
            /deep/.el-calendar-table td.is-selected {
                background: none;
            }

7.修改单元格的高度等

我要往里面塞东西于是改了高度，我把日历的背景改了，发现有边框，于是把边框也改了，其他的样式也可以依此类推

    //    修改单元格的高度，边框
            /deep/ .el-calendar-table__row > td {
                height: 185px;
                border: none;
            }

8.数据格式，渲染列表

数据需要给一个日期，然后用v-if去控制是否显示，否则一个单元格会把所有数据显示出来

用v-for就可以渲染列表出来

  <!-- 自定义内容 -->
                            <div
                                v-for="(item, index) in calendarList"
                                :key="index"
                                class="calendarList"
                            >
                                <div v-if="index == data.day">
                                    {{ item }}
                                </div>
                            </div>

还有一些修改背景样式之类的，应该容易想出来，就不写了

参考文献：

blog.csdn.net/zongmaomx/a…