vue3【组件封装】日历（默认标注今日，可选择日期，可标注日期，可切换月份，样式仿 Win11）

本文主要是介绍vue3【组件封装】日历（默认标注今日，可选择日期，可标注日期，可切换月份，样式仿 Win11），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果预览

在这里插入图片描述

技术要点

获取每个月最后一天

下个月的第0天，自动会被解析为本月的最后一天

let lastDay = computed(() => new Date(year.value, month.value, 0).getDate());

flex 布局末行左对齐

最靠谱的方式是想办法将末行缺失元素填满

本范例中，因星期固定7列，按每月最后一天的星期，推算出末行缺失元素个数并填满。

标注日期不影响布局的办法

改用 IE 盒模型，添加边框时，不会影响页面布局

box-sizing: border-box;

绝对定位元素的水平居中

  /* 绝对定位元素水平居中 */position: absolute;left: 50%;transform: translate(-50%);

纯 HTML 实现图标

▲ 对应字符 ▲
▼ 对应字符 ▼

组件封装

components/S-calender.vue

<script setup lang="ts">
const props = defineProps({ markDayList: Array });
const emits = defineEmits(["chooseDateChange"]);let weekDic = {1: "一",2: "二",3: "三",4: "四",5: "五",6: "六",7: "天",
};let today = new Date();
let year = ref(today.getFullYear());
let month = ref(today.getMonth() + 1);let choosedDate = ref("");// 每个月最后一天的日期(下个月的第0天，这自动会被解析为本月的最后一天)
let lastDay = computed(() => new Date(year.value, month.value, 0)