日历选择组件（打卡，日期计划，日期选择，特别日期标志）-VUE3

最新推荐文章于 2025-06-06 09:26:27 发布

meng_xiaoxiao

最新推荐文章于 2025-06-06 09:26:27 发布

阅读量1.8k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/meng_xiaoxiao/article/details/139699259

自己封装的目的：

使用场景：打卡，日期计划，日期选择，特别日期标志

根据自己的需求可以定制化何样式

不依赖任何第三方插件或者组件，

效果图：

1、日历组件封装

<template>
	<div class="calendar">
		<div class="year-month">
			<div class="arrow up-page" @click="upPage"></div>
			<span>{
  
  {year}}年{
  
  {month}}月</span>
			<div class="arrow next-page"  @click="nextPage"></div>
		</div>
		<div class="week">
			<div class="item" v-for="item of weeks">{
  
  {item}}</div>
		</div>
		<template v-for="line of dates">
			<div class="week">
				<div v-for="item of line" @click="onClick(item)" :class="['item' ,
				{'current-month':month==item.month},
				{'today':today==`${item.month}-${item.date}`},
				{'clickFlag':clickFlag===item.timeStamp},
				{'select':selectDates.find(t=> t>item.timeStamp&&t<item.timeStamp+oneDayTimeStamp)}]">{
  
  {item.date}}</div>
			</div>
		</template>
	</div>
</template>

<script setup>
	import { watchEffect, ref, onBeforeMount