问答

在el-calendar基础上表头修改的地方

作者:admin 2021-04-21 我要评论

饿了么的日历组件 设计图 我想把饿了么日历组件更改成设计图那样。 第一,上个月/下个月更改成箭头 第二,一到日更改成周一到周日 这些怎么改? ### !-- HTML --...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

饿了么的日历组件
image.png

设计
image.png

我想把饿了么日历组件更改成设计图那样。
第一,上个月/下个月更改成箭头
第二,一到日更改成周一到周日

这些怎么改?

###
<!-- HTML -->
<el-calendar v-model="value" :first-day-of-week="7"></el-calendar>

<!-- CSS -->
.el-calendar__header .el-calendar__title {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-size: 20px;
    color: #4e8cda;
}
.el-calendar-table thead th:before{
    content: '周';
}

.el-calendar__button-group {
    width: 100%;
}

.el-button-group {
    display: flex;
    justify-content: space-between;
}

.el-button-group::after, .el-button-group::before {
    content: unset;
}

.el-button-group>.el-button:not(:first-child):not(:last-child) {
    display: none;
}

.el-button-group>.el-button:first-child:before{
    content: '<';
}

.el-button-group>.el-button:last-child:before{
    content: '>';
}

.el-button-group>.el-button:first-child span, .el-button-group>.el-button:last-child span{
    display: none;
}

点击预览

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 在el-calendar基础上表头修改的地方

    在el-calendar基础上表头修改的地方

  • 如何部署网页到线上

    如何部署网页到线上

  • github "vue-grid-layout" 任意拖拽

    github "vue-grid-layout" 任意拖拽

  • css动画,如何实现点击/长按时背景色切

    css动画,如何实现点击/长按时背景色切

腾讯云代理商
海外云服务器