vue写个日历组件

发表于 | 分类于 |


样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
  
.calendar {
  width: 500px;
  margin-left: 100px;
}

.date-header {
  width: 100%;
  display: flex;
  line-height: 30px;
}

.prev-month,
.next-month {
  border: 15px solid transparent;
  width: 0;
  height: 0;
  cursor: pointer;
}

.prev-month {
  border-right-color: #007fff;
}

.next-month {
  border-left-color: #007fff;
}

.show-date {
  flex: 1;
  text-align: center;
  color: #007fff;
}
.week-header {
  display: flex;
}

.week-header > div {
  flex: 1;
  text-align: center;
  line-height: 30px;
  background-color: #007fff;
  color: #fff;
  font-weight: 600;
}

.week-day {
  width: 100%;
}
.every-day {
  
  display: inline-block;
  width: 14.28%;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.other-day {
  color: #ccc;
}
.now-day {
  background-color: #007fff;
  color: #fff;
  font-weight: 600;
}
.active-day:not(.now-day) {
  color: #007fff;
  border: 2px solid #007fff;
  line-height: 46px;
}


html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="app">
  <div class="calendar">
    <div class="date-header">
      <div class="prev-month" @click="handlePrev"></div>
      <div class="show-date">{{ `${year}年${month}月${day}日` }}</div>
      <div class="next-month" @click="handleNext"></div>
    </div>
    <div class="date-content">
      <div class="week-header">
        <div>日</div>
        <div>一</div>
        <div>二</div>
        <div>三</div>
        <div>四</div>
        <div>五</div>
        <div>六</div>
      </div>
      <div class="week-day">
        <div class="every-day" v-for="item in 42">
          <div v-if="item - beginDay > 0 && item - beginDay <= curDays"
               :class="{
                 'now-day': `${year}-${month}-${item - beginDay}` === curDate,
                 'active-day': `${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}`
               }"
               :data-day="item - beginDay"
               @click="handleChooseDay"
          >
            {{ item - beginDay }}
          </div>
          <div v-else-if="item - beginDay <= 0" class="other-day">{{ prevDays - beginDay + item}}</div>
          <div v-else class="other-day">{{ item - beginDay - curDays }}</div>
        </div>
      </div>
    </div>
  </div>
</div>


JavaScript部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      year: null,
      month: null,
      day: null,
      curDate: null,
      activeDay: null
    },
    created () {
      this.getInitTime();
    },
    methods: {
      getInitTime () {
        const date = new Date();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
        this.day = date.getDate();
        this.curDate = `${this.year}-${this.month}-${this.day}`;
      },
      computedDay (month) {
        const day = this.day;
        const year = this.year;
        const allDay = new Date(year, month, 0).getDate();
        if(day > allDay) {
          this.day = allDay;
        }
      },
      handlePrev () {
        if(this.month === 1) {
          this.month = 12;
          this.year --;
        } else {
          this.month --;
        }
        this.computedDay(this.month);
      },
      handleNext () {
        if(this.month === 12) {
          this.month = 1;
          this.year ++;
        } else {
          this.month ++;
        }
        this.computedDay(this.month);
      },
      handleChooseDay (e) {
        this.day = e.target.dataset.day;
      }
    },
    computed: {
      beginDay () {
        return new Date(this.year, this.month - 1, 1).getDay();
      },
      curDays () {
        return new Date(this.year, this.month, 0).getDate();
      },
      prevDays () {
        return new Date(this.year, this.month - 1, 0).getDate();
      }
    }
  })
</script>