Vue3:封装Vuetify3的日期选择器（Date Pickers）组件

封装Vuetify3的日期选择器

• vue3
• vuetify3

1.实现效果

表单中使用时间选择器(DatePicker)

• 点击input输入框时弹出时间选择的界面
• 如果想要选择完日期之后自动退出选择器界面 需要将v-menu里面的:close-on-content-click="true"是这个选项设置为TRUE

2.实现方法

• 使用官方的组件菜单（Menus），将v-text-field和v-date-picker放在一起
• 监听Datepicker的数值，再通过emit向父组件传参

贴代码

<template>
//如果需要选择完数值后自动关闭日期框 需要将close-on-content-click 设置为true
  <v-menu
    :close-on-content-click="false"
    location="bottom"
  >
    <template v-slot:activator="{ props }">
      <v-text-field v-model="formatDate" density="compact" v-bind="props" readonly  variant="underlined" append-inner-icon="mdi-calendar-month-outline" :label="label" ></v-text-field>
    </template>
        <v-date-picker v-model="datetime"></v-date-picker>
  </v-menu>  
</template>
<script lang="ts" setup>
  import { ref,watch } from 'vue'
  import  Dayjs  from 'dayjs';

  // datepicker初始格式 Thu Nov 09 2023 00:00:00 GMT+0800 (中国标准时间)
  const datetime = ref()
  // 转义成YYYY-MM-DD
  const formatDate = ref()
  defineProps<{
    // 固定名称 modelValue
    modelValue:string,
    //标签名称
    label:string
  }>()
  
  const emit = defineEmits(['update:modelValue'])  "update:modelValue"
  watch(datetime, () => {
  	//转换时间格式
    formatDate.value = Dayjs(datetime.value).format("YYYY-MM-DD")
    emit('update:modelValue',formatDate.value)
  })

</script>

• 其中v-model绑定选择器和表单的数值
• modelValue负责向父组件通信
• 使用dayjs插件转换时间格式 dayjs需要安装 npm i dayjs --save

3.使用方式

我将组件封装到components/TimePicker/TimePicker.vue

使用方式

• 先引入进来

import TimePicker from '@/components/TimePicker/TimePicker.vue'

• 使用

<TimePicker v-model="date" label="名称" />