《Vue3+Typescript》一个简单的日历组件实现

这篇具有很好参考价值的文章主要介绍了《Vue3+Typescript》一个简单的日历组件实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~

主页: oliver尹的主页

格言: 跌倒了爬起来就好~

目录

一、前言

二、效果图

三、核心思路

四、代码实现

4.1 本月日期计算

4.2 上月日期补齐

4.3 下个月日期补齐

4.4 转化成二位数组

4.5 使用v-for生成日历

4.6 农历,假期等

五、小结


一、前言

近来项目中需要用到一个日历组件,由于找了找没有找到合适的,因此决定自己简单动手做一个,项目中肯定比这个复杂的多,这里只是给各个小伙伴一个思路或者说是开发的方向~

耐心看完,也许有所收获......(PS:如果要源码留下邮箱,博主看到后会发送的~)

(PS:资源已经上传CSDN了,如果需要可以下载,https://download.csdn.net/download/zy21131437/88123215,如果还是想要发邮箱的,欢迎留邮箱,博主看到就会发的)

二、效果图

大致效果图如下:

《Vue3+Typescript》一个简单的日历组件实现,高级前端工程之路,typescript,状态模式,javascript,日历,日历组件

三、核心思路

日历的核心个人觉得就是 算出指定月份的第一天是星期几,为什么?因为,从形态上来说 日历展现出来就是这么一个7*6的矩形,如果知道1号是星期几,那么就可以把这个矩形在1号之前的日期补齐,最后一天后的日期也可以补齐;

《Vue3+Typescript》一个简单的日历组件实现,高级前端工程之路,typescript,状态模式,javascript,日历,日历组件

因此,日历的计算一共可以分为三段:

  • 第一段,本月计算,计算的是当前1号是周几,接着计算本月一共多少天;
  • 第二段,上月计算,计算1号之前一共有几天;
  • 第三段,下月计算,计算的是本月之后一共有多少天;

这样,三段连在一起就是一组完整的当前数组,如果还不清楚,那再具体举一个例子吧,以2023年7月为例,7月的1号是周六,那么它应该在矩形的这个位置

《Vue3+Typescript》一个简单的日历组件实现,高级前端工程之路,typescript,状态模式,javascript,日历,日历组件

那么在周六前面应该还有6天,需要取6月的最后6天来补齐这个矩形的前半段

接着计算7月最后一天,7月31号是周一,那么它应该在这个位置

《Vue3+Typescript》一个简单的日历组件实现,高级前端工程之路,typescript,状态模式,javascript,日历,日历组件

这样一个完整的矩形(日历)在数据的角度上来说就齐全了;

四、代码实现

4.1 本月日期计算

关于本月日期的计算分为两部分,第一部分,获取当前日期,第二部分 获取本月1号的星期

先是获取当前日期

// 获取当前日期
function getCurrent() {
    const date = new Date();
    return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
}

先是获取本月,很简单

/**
 * 获取公历某一天是星期几
 * @param {number} y 年
 * @param {number} m 月
 * @param {number} d 日
 * @returns {number} 返回星期数字[0-6]
 */
function solarWeek(y: number, m: number, d: number) {
  let date = new Date(y, m - 1, d);
  let week = date.getDay();
  return week;
}

const currentDate = getCurrent()
// 使用
this.solarWeek(currentDate[0], currentDate[1], 1)

这样我们就获取到了第一天是周几了;

4.2 上月日期补齐

关于上月数据获取有一点是需要注意的是,那就是如果当前是1月份,那么要获取的上上一年度的12月份,因此,在计算前首先要对当前月份进行确定

// 判断年度
const y = date[1] === 1 ? date[0] - 1 : date[0];
// 判断月份
const m = date[1] === 1 ? 12 : date[1] - 1;

接着就是判断需要补齐日期的数量了,很简单,我们只需要根据周几来判断,如果是周六,那么就是补齐6天(周一到周五,加上周日),如果是周五,那么就是补齐5天(周一到周四,加上周日);

 /**
   * 获取当月前面需补齐的数组
   */
beforDays(date: number[], last: number) {
    const y = date[1] === 1 ? date[0] - 1 : date[0];
    const m = date[1] === 1 ? 12 : date[1] - 1;

    const arr: dateBase[] = [];
    for (let i = 0; i < last; i++) {
        arr.push({...});
    }
    return arr;
}

这个last就是就是1号的星期,也就是需要循环的次数;

4.3 下个月日期补齐

接着补齐下个月,和上个月计算一样,首先要判断当前是不是12月,如果是12月,那么下个月就是下一年的1月份

const y = date[1] === 12 ? date[0] + 1 : date[0];
const m = date[1] === 12 ? 1 : date[1] + 1;

接着,由于我们知道了当前月的天数和上个月补齐的天数,那么自然下个月需要补齐多少天也能算出来,42-当前月天数-上个月天数=下个月补齐天数

/**
 * 获取当月后面需补齐的数组
 */
afterDays(day: dateBase[], date: number[]) {
    const arr: dateBase[] = [];
    const y = date[1] === 12 ? date[0] + 1 : date[0];
    const m = date[1] === 12 ? 1 : date[1] + 1;

    for (let i = 1; i < 42 - day.length + 1; i++) {
        arr.push({...});
    }
    return [...day, ...arr];
}

到这里,我们就可以获得一个长度为42的数组,这个数组代表从上月的倒数某一天到这个月再到下个月正数的某一天,一共42天;

4.4 转化成二位数组

为什么要转成二位数组,原因很简单,因为我们的这个日历从布局上来说它就是一个二位数组....一共有6行,每行都7格,对吧,因此需要转一下,转的代码也很简单

const dateArray = [];
for (let row = 0; row < 6; row++) {
    dateArray.push(allDate.splice(0, 7));
}

4.5 使用v-for生成日历

基本数据整理完成后,只需要通过Vue的v-for指令去批量生成格子即可;

<template v-if="TBody.length">
  <div
    class="t-calendar-row"
    v-for="(item, index) in TBody"
    :key="index"
    >
    <div
      class="t-calendar-col"
      v-for="(col, colIdx) in item"
      :key="colIdx"
      >
      <CalendarItem
        :col="col"
        :time="selectedTime"
        @changeTargetDate="changeDate"
        ></CalendarItem>
    </div>
  </div>
</template>
<template v-else>
  <div class="no-date">抱歉,暂无数据</div>
</template>

至于每一个格子的样式,可以根据需求进行定制化;

4.6 农历,假期等

真正的日历肯定远不止这些基础数据,肯定还有包括:农历,节日,假期等等不同标注,这些都可以在计算的时候将当前日期对应的值一并算好,在通过v-for渲染的时候将对应的CSS样式渲染上去即可,比如在进行数据push的时候可以:

arr.push({
  // 日期
  title: w - i,
  // 是否本月
  isCurrent: false,
  // 是否节假日
  isHolidays: DateClass.getHolidays([y, m, w - i]),
  date: `${y}-${clockFactory(m)}-${clockFactory(w - i)}`,
  // 阴历
  lunars: lun,
  isNow: false,
  // 阳历节日,如国庆,元旦
  solarDay: DateClass.getSolarDay(m, w - i),
  // 农历节日,如中秋,春节,端午
  lunarDay: DateClass.getlunarDay(Number(l[0]), Number(l[1]), Number(l[2])),
  // 生肖
  animal: DateClass.getAnimal(Number(l[0])),
  // 星座
  astro: DateClass.toAstro(y, m, w - i),
  // 节气
  term: getTerm(Number(l[0]), m, w - i)
});

等等都是可以在数据处理的时候一并处理好;

五、小结

其实知道了日历的生成原理后,居然觉得日历也没有那么难实现,就是稍微麻烦了点,最终要实现成什么样子还需要根据实际需求而定;文章来源地址https://www.toymoban.com/news/detail-622145.html

到了这里,关于《Vue3+Typescript》一个简单的日历组件实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3,Typescript中引用组件路径无法找到模块报错

    是这么个事,我在vue3新创建的项目里,写了个组件叫headerIndex.vue,放到app.vue中import就会报错 路径肯定没写错,找到了解决方法,但是也没想明白为什么 解决方法如下 在vite-env.d.ts文件中加入 就好了,大概意思就是在文件中把组件声明一下,but why

    2024年02月09日
    浏览(42)
  • 基于Vue3和Element Plus组件库实现一个完整的登录功能

    先看一下最终要实现的效果: 登录页面: 注册页面: (1)引入element-plus组件库 引入组件库的方式有好多种,在这里我就在main.js全局引入了. main.js中代码: 引入之后自己可以用几个按钮测试一下是否引入成功. (2)登录及注册页面 html部分 views/account/Login.vue js部分 css部分(使用了scss) (

    2024年02月05日
    浏览(43)
  • 用Vue3.0 写过组件吗?如果想实现一个 Modal你会怎么设计?

    组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式 现在有一个场景,点击新增与编辑都弹框出来进行填写,功能上大同小异,可能只是标题内容或者是显示的主体内容稍微不同 这时候就没必要写两个组件,只需要根据传入的参数不同,

    2024年03月09日
    浏览(38)
  • Vue中的日历组件 Calendar 实现 考勤打卡记录

    实现效果图 1.由于Calendar没有右上角月份切换的API事件,可以给组件源码添加自定义添加一个事件 2.也可以通过自带的input事件来获取日历 3.vue页面完整代码 注释:this.$m(this.beginTime).format(‘YYYY-MM-DD HH:mm’),是分装的标准时间转化年月日,使用者可通过多种方法自定义处理。

    2024年01月22日
    浏览(55)
  • vue3 一个基于pinia简单易懂的系统权限管理实现方案,vue-router动态路由异步问题解决

    作为项目经验稀少的vue开发者来说,在关键技术点上的经验不多,我希望通过我的思想和实践,把好的东西分享在这里,目的是进一步促进技术交流。项目即将完成,权限是最后的收尾工作,好的权限实现方案,可以让我们没有后顾之忧,也可以提升项目的运行速度。 在开发

    2023年04月08日
    浏览(53)
  • vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript

    写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西, 也有些人把很多接口都放在一个js文件内, 看起来很是杂乱, 后来用到nuxt写的时候, 感觉用文件名来命名接口路径很是方便, 无论是query参数还是params参数,都可以通过文件名来命名, 也可以通过文件夹层级

    2024年02月11日
    浏览(47)
  • 直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

    当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时,你可以利用 Vue 的数据绑定和事件处理能力,结合 HTML 和 CSS,轻松地创建一个交互式的图片上传界面。以下是一个示例: index.html TANKING https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00

    2024年02月13日
    浏览(42)
  • Naive UI:一个 Vue 3 组件库,比较完整,主题可调,使用 TypeScript,快有点意思。

    在当今的前端开发领域,Vue 3已成为中后台应用的首选框架。为了满足开发者的需求,各种组件库如雨后春笋般涌现。其中,Naive UI以其独特的优势,成为了Vue 3开发者的得力助手。本文将深入探讨Naive UI的特性、优势以及如何使用它来提高开发效率。 一、Naive UI的特性 组件丰

    2024年04月22日
    浏览(42)
  • Vue3 +TypeScript 引入 BabylonJs(Vue3实现3D)【一篇文章精通系列】

    本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例,详细讲解了如何在Vue3项目中引入BabylonJs,并了解其相关知识。通过本文的学习,相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。 1、创建Vue3 + TypeScript项目 将生成的js文件都修改为

    2024年02月04日
    浏览(42)
  • vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能

    已经好久没有更新过博客了,大概有两三年了吧,因为换了工作,工作也比较忙,所以也就没有时间来写技术博客,期间也一直想写,但自己又比较懒,就给耽误了。今天这篇先续上,下一篇什么时候写,我也不知道,随心所欲、随遇而安、安之若素、素不相识也就无所谓了

    2024年02月06日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包