vue vue3 日期选择的组件，封装组件

在Vue 3中，你可以创建一个日期选择组件，使用<input>元素结合第三方库如flatpickr来增强日期选择功能。以下是一个简单的日期选择组件的示例：

<template>
  <flat-pickr v-model="date" :config="config" class="date-picker" />
</template>
 
<script>
import { ref } from 'vue';
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import 'flatpickr/dist/themes/light.css';
 
export default {
  components: {
    flatPickr
  },
  setup() {
    const date = ref(null);
    const config = {
      altInput: true,
      altFormat: 'Y-m-d',
      dateFormat: 'Y-m-d'
    };
 
    return {
      date,
      config
    };
  }
};
</script>
 
<style>
.date-picker {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s;
}
 
.date-picker:focus {
  border-color: #007bff;
}
</style>

在这个组件中，我们使用了vue-flatpickr-component库来封装flatpickr日期选择器。通过v-model实现数据双向绑定，并通过config对象来配置日期选择器的行为。你可以根据需要调整config中的选项。