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

<template>
 <div class="lookForMonth_wrapper">
  <div class="lookForMonth_top">
   <div class="selectDate">
    <div>{{year}} 年 {{month}} 月</div>
    <div class="upDownSelect">
     <div class="upDownSelect_item" @click="dateUp"></div>
     <div class="upDownSelect_item" @click="dateDown"></div>
    </div>
   </div>
  </div>
  <div class="calendar" :style="calendarStyle">
   <div v-for="(item,index) in calendarData" class="calendar_item" :key='index' :class="{ash:item.color==='ash',date:index>6&&item.color!=='ash'}">
    <p class="dateEdit">{{item.label}}<i class="el-icon-edit-outline" v-if="item.color!=='ash'&&index>=7"></i></p>
    <p v-if='index>6'>上班</p> // 打工人
   </div>
  </div>
 </div>
</template>
<script>
export default {
 name: "lookForMonth",
 data: () => {
 return {
  calendarData: [{label:"日"},{label: "一"}, {label:"二"},{label: "三"},{label: "四"},{label: "五"},{label: "六"}], //日历循环渲染数据
  year: 0, //当前日期年
  month: 0, //当前日期月数
  date: 0, //当前日期号数
  day: -1, //当前星期几
 };
 },
 filters:{
 },
 computed: {
 // 根据当月日期详情更改日历表格高度
 calendarStyle() {
  if (this.calendarData.length > 42) {
  return "height: 701px;";
  } else {
  return "height: 601px;";
  }
 }
 },
 async created(){
 // 获取当前日期数据
 this.getNow();
 // 获取当前月份一号的时间戳
 let firstTime = +new Date(this.year,this.month-1,1,0,0,0)
 this.getCalendarDate(); // 给calendarData添加当月数据
 },
 mounted() {
 },
 methods: {
 // 获取当前时间
 getNow() {
  let now = new Date()
  this.year = +now.getFullYear()
  this.month = +now.getMonth() + 1
  this.date = +now.getDate()
  this.day = +now.getDay()
 },
 // 获取每个月的天数
 monthDay(month) {
  if ([1,3,5,7,8,10,12].includes(month)) {
  return 31
  } else if ([4,6,9,11].includes(month)) {
  return 30
  } else if (month === 2) {
  // 判断当年是否为闰年
  if (
   (this.year % 4 === 0 && this.year % 100 !== 0) ||
   this.year % 400 === 0
  ) {
   return 29
  } else {
   return 28
  }
  }
 },
 // 给calendarData添加当月数据
 getCalendarDate() {
  // 获取当前月份一号星期几
  let firstDay = new Date(this.year + "-" + this.month + "-" + "01").getDay();
  this.calendarData = [{label:"日"},{label: "一"}, {label:"二"},{label: "三"},{label: "四"},{label: "五"},{label: "六"}];
  let num = parseInt(firstDay);
  let nowDays = this.monthDay(this.month);
  let lastMonth = this.month - 1>0"scss" scoped>
.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;
 }
}
</style>

效果如下:

用vue写一个日历

以上就是利用vue写一个日历的详细内容,更多关于vue 日历的资料请关注其它相关文章!

标签:
vue,日历

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“用vue写一个日历”

暂无“用vue写一个日历”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。