我让deepseek帮我写了个unipp日历组件，非常好用，效率拉满-CSDN博客

本文链接：https://blog.csdn.net/qq_32724031/article/details/146122838

背景

最近想给随手记个账小程序加个日历组件，用于显示日常预算及开支，于是我把我的需求告诉deepseek，于是，他给了我一串代码，不得不说，deepseek确实非常强大，相比我自己纯手写半天一天起步的工作量，deepseek一分钟输出完成，效率直接拉满，妥妥的要失业的节奏。

代码

以下源码全部为deepseek输出，效果大大超出我的预期，虽然还有一些不足之处，但个人看来已经非常完美了。效果图见源码下方

页面代码如下

<view class="calendar-container">
	<view class="header">
	  <text class="arrow" @click="switchMonth(-1)">◀</text>
	  <text class="month">{{ currentYear }}年{{ currentMonth }}月</text>
	  <text class="arrow" @click="switchMonth(1)">▶</text>
	</view>

	<view class="weekdays">
	  <text v-for="(w, i) in ['日','一','二','三','四','五','六']" :key="i">{{ w }}</text>
	</view>

	<view class="days-grid">
	  <view v-for="(day, index) in days" :key="index" class="day-item" :style="getDayStyle(day)" @click="handleDayClick(day)">
		<view v-if="day.tag" class="corner-tag" :style="getTagStyle(day)"> {{ day.tag }} </view>
		<text class="day-number">{{ day.date }}</text>
		<text v-if="showLunar" class="lunar">{{ day.lunar }}</text>
		<view v-if="day.subText" class="sub-text" :style="getSubTextStyle(day)"> {{ day.subText }} </view>
	  </view>
	</view>
</view>

TS脚本如下

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getLunar } from 'chinese-lunar-calendar';

// 类型定义‌:ml-citation{ref="1,6" data="citationList"}
interface CalendarDay {
  date: number;
  lunar?: string;
  tag?: string;
  tagColor?: string;
  tagBg?: string;
  subText?: string;
  subTextColor?: string;
  subTextBg?: string;
  customBg?: string;
  empty?: boolean;
}

// 组件属性‌:ml-citation{ref="3" data="citationList"}
const props = defineProps<{
  showLunar?: boolean;
  defaultBg?: string;
  datesConfig?: CalendarDay[];
}>();

// 响应式数据
const currentYear = ref(new Date().getFullYear());
const currentMonth = ref(new Date().getMonth() + 1);
const days = ref<CalendarDay[]>([]);

// 事件声明‌:ml-citation{ref="3" data="citationList"}
const emit = defineEmits<{(e: 'day-click', day: CalendarDay): void;}>();

// 生成日历数据‌:ml-citation{ref="1,2" data="citationList"}
const generateCalendar = () => {
  const date = new Date(currentYear.value, currentMonth.value - 1, 1);
  const totalDays = new Date(currentYear.value, currentMonth.value, 0).getDate();
  const firstDay = date.getDay();
  
  // 生成日期数组‌:ml-citation{ref="3" data="citationList"}
  days.value = [
    ...Array.from({ length: firstDay }, () => ({ empty: true })),
    ...Array.from({ length: totalDays }, (_, i) => {
      const day = i + 1;
      const solarDate = new Date(currentYear.value, currentMonth.value - 1, day);
      const customConfig = props.datesConfig?.find(c => c.date === day && c.month === currentMonth.value && c.year === currentYear.value) || {};
      return { date: day,
        lunar: props.showLunar ? getLunarFormat(solarDate),
        ...customConfig
      } as CalendarDay;
    })
  ];
};

// 农历格式化‌:ml-citation{ref="1,4" data="citationList"}
const getLunarFormat = (date: Date) => {
  // const lunar = getLunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
  // return `${lunar.lunarMonth}月${lunar.lunarDate}`;
};

// 月份切换‌:ml-citation{ref="3,5" data="citationList"}
const switchMonth = (step: number) => {
  let newMonth = currentMonth.value + step;
  currentYear.value += Math.floor((newMonth - 1) / 12);
  currentMonth.value = ((newMonth - 1) % 12 + 12) % 12 + 1;
};

// 样式计算‌:ml-citation{ref="6" data="citationList"}
const getDayStyle = (day: CalendarDay) => ({
  backgroundColor: day.customBg || props.defaultBg || "#fff"
});

const getTagStyle = (day: CalendarDay) => ({
  color: day.tagColor || "#ff4444",
  backgroundColor: day.tagBg || 'transparent'
});

const getSubTextStyle = (day: CalendarDay) => ({
  color: day.subTextColor || "#666",
  backgroundColor: day.subTextBg || 'transparent'
});

// 点击事件‌:ml-citation{ref="3" data="citationList"}
const handleDayClick = (day: CalendarDay) => {
  if (!day.empty) emit('day-click', day);
};

// 监听年月变化‌:ml-citation{ref="5" data="citationList"}
watch([currentYear, currentMonth], generateCalendar, { immediate: true });
</script>

css样式

<style lang="scss" scoped>
.calendar-container {
  padding: 20rpx;
  background: #f8f8f8;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  
  .month {
    margin: 0 40rpx;
    font-size: 36rpx;
  }
  .arrow {
    font-size: 32rpx;
    color: #666;
  }
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 20rpx 0;
  color: #666;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 1rpx;
  background: #e0e0e0;

  .day-item {
    position: relative;
    min-height: 150rpx;
    padding: 10rpx;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .corner-tag {
      position: absolute;
      top: 4rpx;
      right: 4rpx;
      font-size: 20rpx;
      transform: scale(0.8);
    }

    .day-number {
      font-size: 36rpx;
      margin-top: 10rpx;
    }

    .lunar {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;
    }

    .sub-text {
      position: absolute;
      bottom: 4rpx;
      width: 100%;
      text-align: center;
      font-size: 24rpx;
      padding: 2rpx 0;
    }
  }
}
</style>

页面引用

<template>
	<calendar :show-lunar="true" :dates-config="specialDates" @day-click="handleDayClick"/>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import calendar from '@/components/calendar/calendar.vue';
	
	const info = ref({
		lunar: true, // 显示农历
		range: false,
		insert: true,
		showMonth: true, // 是否显示月份为背景
		selected: []
	});
	
	const specialDates = ref([{
		year: 2025,
		month: 3,
		date: 8,
		tag: '休',
		tagColor: '#ff0000',
		subText: '女神节',
		subTextBg: '#ff99cc'
	}]);
	
	const change = (e) => {
		console.log('change 返回:', e)
		// 模拟动态打卡
		if (info.value.selected.length > 5) return
		info.value.selected.push({
			date: e.fulldate,
			info: '211.99'
		})
	}
	
	const monthSwitch = (e) => {
		console.log('monthSwitchs 返回:', e)
	}
	
	const handleDayClick = (day) => {
	  console.log('选中日期:', day);
	}
</script>