用vue写一个日历

　　之前在上家公司做过一个公司人员考勤的东西，里面需要用到日历，当时自己用vue随便写了一个，比较简单，删掉了其他功能的代码，只留下日历，直接看代码

.lookForMonth_wrapper {
 padding: 20px;
 width: 701px;
 margin: auto;
}
.lookForMonth_top {
 margin-bottom: 20px;
 overflow: hidden;
 .selectTeacher {
 float: left;
 }
 .selectDate {
 height: 30px;
 line-height: 30px;
 float: right;
 display: flex;
 .upDownSelect {
  display: flex;
  flex-direction: column;
  margin-top: -2px;
  margin-left: 5px;
  .upDownSelect_item {
  width: 0;
  height: 0;
  border: 7px solid transparent;
  cursor: pointer;
  }
  .upDownSelect_item:nth-child(1) {
  border-bottom: 7px solid #666;
  margin-bottom: 5px;
  &:hover {
   border-bottom: 7px solid skyblue;
  }
  }
  .upDownSelect_item:nth-child(2) {
  border-top: 7px solid #666;
  &:hover {
   border-top: 7px solid skyblue;
  }
  }
 }
 }
}

.calendar {
 width: 701px;
 border-top: 1px solid #ccc;
 border-left: 1px solid #ccc;
 display: flex;
 flex-wrap: wrap;
 box-sizing: border-box;
 .calendar_item {
 box-sizing: border-box;
 width: 100px;
 height: 100px;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 &.date:hover{
  background: #eee;
 }
 .status{
  margin-top: 10px;
  &.textBlue{
  color: blue;
  }
  &.textRed{
  color: brown;
  }
 }
 .el-icon-edit-outline{
  cursor: pointer;
  margin-left: 7px;
 }
 }
 .ash{
 color: gainsboro;
 }
 .dateEdit{
 margin-bottom: 10px;
 }
}

效果如下：

以上就是利用vue写一个日历的详细内容，更多关于vue 日历的资料请关注考高分网其它相关文章！