使用vue3配合elementPlus写一个出生日期选择器

好的，以下是一个简单的出生日期选择器的 Vue3 组件示例，使用 Element Plus 的 DatePicker 组件：

<template>
  <el-date-picker
    v-model="birthday"
    type="date"
    placeholder="选择出生日期"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'BirthdayPicker',
  data() {
    return {
      birthday: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 禁止选择未来的日期
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const yesterday = new Date();
              yesterday.setTime(yesterday.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', yesterday);
            },
          },
        ],
      },
    };
  },
});
</script>

该组件包含一个 `el-date-picker` 元素，绑定了 `birthday` 变量，用于存储用户选择的日期。在 `pickerOptions` 对象中可以设置日期选择器的一些选项，如禁止选择未来的日期、添加快捷键等。

请注意，这只是一个简单的示例，还可以根据实际需要进行优化和扩展。