vue3 ts 根据elementplus日期控件 根据开始时间和结束时间，自动计算间隔年月日

在 Vue 3 中，结合 TypeScript 和 Element Plus 的日期组件，你可以创建一个动态计算两个日期之间间隔的功能。首先，你需要引入 Element Plus 的 `DatePicker` 组件，并利用 TypeScript 来声明类型。下面是一个基本的示例：

<template>
  <el-date-picker v-model="startDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
  <p>间隔信息: {{ dateInterval }}</p>
</template>

<script lang="ts">
import { Component, Prop } from 'vue';
import { ElDatePicker } from 'element-plus';

@Component({
  components: {
    ElDatePicker,
  },
})
export default class MyComponent extends Vue {
  // 定义类型
  @Prop({ type: [Date, String], required: true }) startDate!: Date | string;
  @Prop({ type: [Date, String], required: true }) endDate!: Date | string;

  computed: {
    dateInterval: () => {
      const start = new Date(this.startDate);
      const end = new Date(this.endDate);

      let interval = '';
      if (start.getFullYear() !== end.getFullYear()) {
        interval += `${end.getFullYear() - start.getFullYear()} 年`;
      }
      if (end.getMonth() !== start.getMonth()) {
        interval += `${Math.abs(end.getMonth() - start.getMonth())} 个月`;
      } else if (end.getDate() !== start.getDate()) {
        interval += `${Math.abs(end.getDate() - start.getDate())} 天`;
      }

      return interval || '同一天';
    };
  }
}
</script>

在这个例子中，当用户选择开始和结束日期后，`dateInterval` 计算属性会自动更新并显示两个日期之间的间隔。注意这里假设输入的是合法的日期字符串或者 Date 对象。