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)