最近遇到的一個(gè)項(xiàng)目需要實(shí)現(xiàn)日歷板的功能蹋辅，前期技術(shù)準(zhǔn)備的時(shí)候隨手寫(xiě)了一個(gè)簡(jiǎn)版日歷板照筑，樣式幾乎沒(méi)有胸私，功能也只有月份的切換厌处，這里隨手一發(fā)，后續(xù)會(huì)在這個(gè)基礎(chǔ)上拓展復(fù)雜功能岁疼。
實(shí)現(xiàn)效果：
-----------------------------------------------------------------------------------------------------------------------------------
<template>
? <div class="hello">
? ? <div class="flexd center">
? ? ? <button @click="monthChange(1)">上月</button>
? ? ? <span> {{ year }}年{{ month }}月 </span>
? ? ? <button @click="monthChange(2)">下月</button>
? ? </div>
? ? <div class="bord shadow">
? ? ? <div class="topTh flexd">
? ? ? ? <div
? ? ? ? ? class="sons Th bigblack f18 flexd_center border"
? ? ? ? ? v-for="list in weeks"
? ? ? ? ? :key="list"
? ? ? ? >
? ? ? ? ? {{ list }}
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="daysBox flexd wrap">
? ? ? ? <div
? ? ? ? ? class="sons cubes"
? ? ? ? ? :class="`${list.type} kkk`"
? ? ? ? ? v-for="(list, index) in dateList"
? ? ? ? ? :key="'a_' + index"
? ? ? ? >
? ? ? ? ? <div class="dateBox">
? ? ? ? ? ? <div class="dateText">
? ? ? ? ? ? ? {{ list.date }}
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? name: "HelloWorld",
? data() {
? ? return {
? ? ? weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
? ? ? year: new Date().getFullYear(),
? ? ? month: new Date().getMonth() + 1,
? ? ? date: new Date().getDate(),
? ? ? dateList: [],
? ? };
? },
? methods: {
? ? monthChange(e) {
? ? ? if (e == 1) {
? ? ? ? this.month--;
? ? ? ? if (this.month == 0) {
? ? ? ? ? this.month = 12;
? ? ? ? ? this.year--;
? ? ? ? }
? ? ? } else {
? ? ? ? this.month++;
? ? ? ? if (this.month == 13) {
? ? ? ? ? this.month = 1;
? ? ? ? ? this.year++;
? ? ? ? }
? ? ? }
? ? ? this.getDateList();
? ? },
? ? getDateList() {
? ? ? this.dateList = [];
? ? ? let month = this.month,
? ? ? ? year = this.year,
? ? ? ? firstDay = this.getFirstDay(year, month),
? ? ? ? daysLength = this.getDaysLength(year, month),
? ? ? ? dateList = this.dateList,
? ? ? ? that = this;
? ? ? let preMonth = month - 1,
? ? ? ? preYear = year,
? ? ? ? nextMonth = month + 1,
? ? ? ? nextYear = year;
? ? ? if (preMonth == 0) {
? ? ? ? preMonth = 12;
? ? ? ? preYear--;
? ? ? }
? ? ? if (nextMonth == 13) {
? ? ? ? nextMonth = 1;
? ? ? ? nextYear++;
? ? ? }
? ? ? for (var i = 0; i < 42; i++) {
? ? ? ? if (i < firstDay) {
? ? ? ? ? dateList.push({
? ? ? ? ? ? date:
? ? ? ? ? ? ? preYear +
? ? ? ? ? ? ? "-" +
? ? ? ? ? ? ? preMonth +
? ? ? ? ? ? ? "-" +
? ? ? ? ? ? ? (that.getDaysLength(preYear, preMonth) + (i - firstDay + 1)),
? ? ? ? ? ? type: "prev",
? ? ? ? ? });
? ? ? ? } else if (i < firstDay + daysLength) {
? ? ? ? ? dateList.push({
? ? ? ? ? ? date: year + "-" + month + "-" + (i - firstDay + 1),
? ? ? ? ? ? type: "now",
? ? ? ? ? });
? ? ? ? } else {
? ? ? ? ? dateList.push({
? ? ? ? ? ? date:
? ? ? ? ? ? ? nextYear +
? ? ? ? ? ? ? "-" +
? ? ? ? ? ? ? nextMonth +
? ? ? ? ? ? ? "-" +
? ? ? ? ? ? ? (i - (firstDay + daysLength) + 1),
? ? ? ? ? ? type: "next",
? ? ? ? ? });
? ? ? ? }
? ? ? }
? ? },
? ? getFirstDay(year, month) {
? ? ? //獲取當(dāng)月第一天是周幾
? ? ? let that = this;
? ? ? return new Date(year + "-" + month + "-1").getDay();
? ? },
? ? getDaysLength(year, month) {
? ? ? //獲取某月天數(shù)
? ? ? var d = new Date(year, month, 0);
? ? ? return d.getDate();
? ? },
? },
? created() {
? ? this.getDateList();
? },
};
</script>
<style scoped lang="scss" >
.hello {
? padding: 1rem;
? .bord {
? ? border: 2px solid gray;
? ? width: 100%;
? ? height: max-content;
? ? .daysBox {
? ? ? .cubes {
? ? ? ? height: 9rem;
? ? ? ? border: 1px solid gainsboro;
? ? ? ? &.prev,
? ? ? ? &.next {
? ? ? ? ? background: rgba(0, 0, 0, 0.05);
? ? ? ? ? cursor: not-allowed;
? ? ? ? }
? ? ? ? .dateBox {
? ? ? ? ? width: 100%;
? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? }
? ? }
? ? .topTh {
? ? ? border-bottom: 2px solid gray;
? ? }
? ? .sons {
? ? ? width: calc(100% / 7);
? ? ? &.Th {
? ? ? ? height: 35px;
? ? ? ? border: 1px solid ghostwhite;
? ? ? ? background: lightgrey;
? ? ? }
? ? }
? }
}
</style>
----------------------------------------------------------------------------------------------------------------------------
這個(gè)vue文件就可以實(shí)現(xiàn)全部功能阔涉，另外項(xiàng)目引用了全局css文件，以下是部分樣式
?.flexd{
????????display:?flex;
????}
??.flexd_center{
????????display:?flex;
????????align-items:?center;
????????justify-content:?center;
????}
?.center{
????????text-align:?center;
????????justify-content:?center;
????}
?.f18{
????????font-size:?18px;
????}
?.wrap{
????????flex-wrap:?wrap;
????}
以上
