文章

Vue2日历组件

Vue2 日历组件

发表于 更新于
作者 独行的风
1 分钟阅读

Vue2 日历组件

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

    <div
      class="cal_h_btn"
      @click="preYear"
    >
      <svg class="cal_h_l_icon">
        <polyline
          points="6,0 2,4 6,8"
          style="fill:none;stroke:#909399;stroke-width:1"
        />
        <polyline
          points="10,0 6,4 10,8"
          style="fill:none;stroke:#909399;stroke-width:1"
        />
      </svg>
    </div>
    <div
      class="cal_h_btn"
      @click="preMonth"
    >
      <svg class="cal_h_l_icon">
        <polyline
          points="6,0 2,4 6,8"
          style="fill:none;stroke:#909399;stroke-width:1"
        />
      </svg>
    </div>
  </div>

  <div>

    <span class="cal_h_time">{{ year }} 年 </span>


    <span class="cal_h_time">{{ month }} 月</span>

  </div>

  <div class="cal_h_left">
    <div
      class="cal_h_btn"
      @click="nextMonth"
    >
      <svg class="cal_h_l_icon">
        <polyline
          points="2,0 8,4 2,8"
          style="fill:none;stroke:#909399;stroke-width:1"
        />
      </svg>
    </div>
    <div
      class="cal_h_btn"
      @click="nextYear"
    >
      <svg class="cal_h_l_icon">
        <polyline
          points="2,0 8,4 2,8"
          style="fill:none;stroke:#909399;stroke-width:1"
        />
        <polyline
          points="6,0 12,4 6,8"
          style="fill:none;stroke:#909399;stroke-width:1"
        />
      </svg>
    </div>
  </div>
</div>

<div class="cal_month">
  <div class="cal_m_weeks">
    <span
      v-for="w in weeks"
      :key="w"
      class="cal_m_day_cell"

    >{{ w }}</span>

  </div>

  <div class="cal_m_days">
    <div
      v-for="(ds, index) in monthData"
      :key="index"
      class="cal_m_day_line"
    >
      <div
        v-for="d in ds"
        :key="d.day"
        class="cal_m_day_cell cal_m_day_cell_2"
        :style="{color: getCellColor(d).color, backgroundColor: getCellColor(d).backgroundColor}"
        @mouseenter="mouseenter(d, $event)"
        @mouseleave="mouseleave(d, $event)"
      >

        {{ d.day }}

        <slot :name="d.fullYear + '-' + d.month + '-' + d.day"></slot>
        <div style="position:absolute;bottom:-20px" v-if="d.type === 1">今天</div>
      </div>
    </div>
  </div>
</div>

</div> </template>

```

Web前端, Vue
vue
本文由作者按照 CC BY 4.0 进行授权