vant 日历组件优化

在使用Vant的Calendar组件时，可以通过以下方式进行优化：

1. 使用poppable属性让日历弹窗可关闭。
2. 使用show-confirm属性在用户选择日期时显示确认按钮。
3. 使用formatter属性自定义日历内日期的格式。
4. 使用min-date和max-date属性限制日期选择范围。
5. 使用default-date属性设置默认显示的日期。
6. 使用lazy-render属性提高初始化性能。

以下是一个简单的示例代码：

<template>
  <van-calendar
    v-model="show"
    :poppable="true"
    :show-confirm="true"
    :formatter="formatter"
    :min-date="minDate"
    :max-date="maxDate"
    :default-date="defaultDate"
    :lazy-render="true"
    @confirm="onConfirm"
  />
</template>
 
<script>
import { ref } from 'vue';
import { Calendar } from 'vant';
import 'vant/lib/index.css';
 
export default {
  components: {
    VanCalendar: Calendar,
  },
  setup() {
    const show = ref(false);
    const minDate = new Date();
    const maxDate = new Date(2025, 10, 1);
    const defaultDate = new Date();
 
    const formatter = (day) => {
      if (day.type === 'start') {
        return `<div style="color: red;">${day.text}</div>`;
      }
      return day.text;
    };
 
    const onConfirm = (date) => {
      console.log(date);
    };
 
    return {
      show,
      formatter,
      minDate,
      maxDate,
      defaultDate,
      onConfirm,
    };
  },
};
</script>

在这个示例中，我们使用了v-model来控制日历的显示与隐藏，并设置了一些属性来优化用户体验。formatter属性用于自定义日历中日期的显示格式，minDate和maxDate限制了日期的范围，defaultDate设置了默认显示的日期，而lazy-render使得日历初次渲染更高效。此外，show-confirm属性使得用户选择日期后可以通过确认按钮来完成选择。