vue3+ts封装Date-Picker时间插件

在Vue 3和TypeScript中封装一个日期选择插件，可以通过创建一个自定义组件来实现。以下是一个简单的示例：

1. 创建一个新的组件文件 DatePicker.vue：

<template>
  <div>
    <label>{{ label }}</label>
    <input type="date" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'DatePicker',
  props: {
    modelValue: String,
    label: String
  },
  emits: ['update:modelValue']
});
</script>

2. 在父组件中使用封装的日期选择器：

<template>
  <div>
    <DatePicker v-model="selectedDate" label="选择日期"/>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import DatePicker from './DatePicker.vue';
 
export default defineComponent({
  components: {
    DatePicker
  },
  setup() {
    const selectedDate = ref<string>('');
    return { selectedDate };
  }
});
</script>

这个封装的DatePicker组件接受一个modelValue作为输入日期，并且使用update:modelValue事件来更新日期。它还接受一个label属性来设置输入框旁边的文本标签。在父组件中，你可以使用v-model来创建双向数据绑定。