vue自定义日历

最新推荐文章于 2025-04-07 15:09:15 发布

爱好编程的老李头

最新推荐文章于 2025-04-07 15:09:15 发布

阅读量629

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43992330/article/details/117622471

版权

本文详细介绍了如何在Vue.js中创建一个自定义的日历组件。从需求分析到组件结构设计，再到代码实现，包括日历展示、日期选择、事件绑定等功能。通过实例代码，帮助读者理解Vue组件化开发的理念和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div class="calendar">
    <!-- 导航 -->
    <div class="calendar-nav">
        <span>关闭</span>
        <span>文案</span>
        <span>确认</span>
    </div>
<!-- 开始日期/结束日期 -->
<div class="aclendar-begin">
    <div class="aclendar-data aclendar-rightBorder">
        <span class="aclendar-dataText">开始日期</span>
        <input class="aclendar-input" type="text" disabled v-model="begin">
    </div>
     <div class="aclendar-data">
        <span class="aclendar-dataText">结束日期</span>
        <input class="aclendar-input" type="text" disabled v-model="begin">
    </div>
</div>
<!-- 日历 -->
  <div class="custom-calendar" :style="{width:calendarWidth,height:calendarHeight}" :class="calendarClass">
    <div class="calendar-topBox">
      <slot name="calendarTitle"></slot>
      <slot name="calendarTop" :currentYear="currentYear" :currentMonth="currentMonth+1" :changeMonth="changeMonth">
        <div class="calendar-title rowBtween" :style="{height:titleHeight,background:titleBk}" :class="titleClass">
          <div class="right">
               <slot name="monthRightBtn" :changeMonth="changeMonth" :currentYear="currentYear" :currentMonth="currentMonth+1">
                  <i class="el-icon-arrow-left" @click="changeMonth(0)"></i>
                   <strong class="left">{
   {
   currentYear}}{
   {
   titleDateConnector || '年'}}{
   {
   currentMonth+1}}{
   {
   titleDateConnector ? '' : '月'}}</strong>
                  <i class="el-icon-arrow-right" @click="changeMonth(1)"></i>
               </slot>
           </div>
        </div>
      </slot>
    </div>
    <div class="calendar-body" :style="{background:bodyBk}" :class="bodyClass">
      <div class="bodyTitleBox rowCenter">
        <slot name="weeks">
          <span class="body-title rowCenter" :ref="index ? '' : 'calenCellTitle'" :style="{height:cellTitleHeight,color:cellTitleColor}" v-for="(week,index) in weeks" :key="index">{
   {
   week}}</span>
        </slot>
      </div>
      <div class="calen-content rowCenter">
        <div class="calen-cell" :id="'calen'+index" :ref="index ? '' : 'calenCell'" :class="[calenCellClass,index<7 ? 'firstRowCellClass': '',index%7===0 ? 'firstColumCellClass' : '']"  :style="{...calenCellStyle,...cellBorderStyle(index)}" v-for="(day,index) in calendarList" :key="index" @click="choose(day,index)">
          <slot name="day" :day="day">
            <span class="dateSpan rowCenter" :class="day.dateClass">{
   {
   day.day}}</span>
          </slot>
          <div class="rowCenter" v-show="day.hasData && day.isThis">
            <slot name="haveDataTag" :hasData="day.hasData" :isThis="day.isThis">
              <div class="tag"></div>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
    import {
   isValidDate,isNumber} from "./validate"
    import {
   checkStartTimeEndTimeFun,insertDataToCalendar} from './util'
    export default {
   
        name: "Calendar",
        props: {
   
            initDate:{
   
                type:[String,Date,Number],
                default:()=>new Date()
            },//初始化日期
            width:{
   
                type:[String,Number],
                default:'100%'
            },//日历宽度
            height:{
   
                type:[String,Number],
                default:'100%'
            },//日历高度
            calendarClass:String,