基于elementui的工作日，休息日的日历组件

• 前端

基于elementui的工作日，休息日的日历组件

  • 功能要求
  • DatePicker 日期选择器
    • 国际化
    • 周六，周日所在列背景颜色修改
    • 添加节假日，工作日
    • 代码

功能要求

在这里插入图片描述，如图要求做一个可以显示休息日和工作日的组件。我基于element-ui已有的组件进行修改。

在这里插入图片描述

DatePicker 日期选择器

以”日“为基本单位，基础的日期选择控件。

在这里插入图片描述

国际化

使用element-ui的国际化功能将星期一到星期日设置为中文

在这里插入图片描述

在vue组件里面引入el-date-picker

在这里插入图片描述

得到中文配置的容=日期选择器

在这里插入图片描述

周六，周日所在列背景颜色修改

打开控制台查看周一到周日的样式

在这里插入图片描述

在这里插入图片描述

然后我们修改组件的样式

在这里插入图片描述

得到如图效果：

在这里插入图片描述

添加节假日，工作日

使用element-ui的自定义功能

在这里插入图片描述

我们稍加修改

在这里插入图片描述

在这里插入图片描述

此时已经能展示休息日了，在实际开发中，休息日的数组可以由后端返回，以及工作日的数组。

代码

  
    
      
        
          {{ cell.text }}
          休
        
      
    
  



import { ref } from 'vue'
// 类型学习
const value1 = ref(null)
const size = ref('default')
const a = ref('inint')
console.log(a.value, 'a------')
a.value = 'zhangsan'
console.log(a.value, 'a------')
const holidays = [
  '2021-10-01',
  '2021-10-02',
  '2021-10-03',
  '2021-10-04',
  '2021-10-05',
  '2021-10-06',
  '2021-10-07'
]
const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}


.el-date-table th:nth-child(n+7){
background-color: #c0c0c0
}
.el-date-table th:nth-child(1){
background-color: #c0c0c0
}
.holiday{
  position: absolute;
    top: -7px;
    left: 14px;
}
.el-date-table td:nth-child(n+7){
background-color: #c0c0c0
}
.el-date-table td:nth-child(1){
background-color: #c0c0c0
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/51d50e05e2.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐