vue3:封装vuetify3时间选择器DatePicker中添加确定和取消
原版选择日期后自动退出 传送门连接
升级后的界面展示
实现方式
- 在v-data-picker标签中添加插槽
actions
- v-menu标签内添加v-model
贴代码
<!-- @Datepicker使用方式
<Timepicker lable="表单日期名字" v-model="绑定表单中的日期参数" /> -->
<template>
<v-menu
:close-on-content-click="false"
location="bottom"
v-model="DTStatus"
>
<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">
<template v-slot:actions>
<v-btn color="primary" @click="DTStatus = false">取消</v-btn>
<v-btn color="primary" @click="clickHandle">确定</v-btn>
</template>
</v-date-picker>
</v-menu>
</template>
<script lang="ts" setup>
import { ref,watch } from 'vue'
import Dayjs from 'dayjs'
const DTStatus = ref<boolean>(false)
const datetime = ref()
const formatDate = ref()
defineProps<{
modelValue:string,
label:string
}>()
const emit = defineEmits(['update:modelValue'])
const clickHandle = () => {
formatDate.value = Dayjs(datetime.value).format("YYYY-MM-DD")
emit('update:modelValue',formatDate.value)
DTStatus.value = false
}
</script>
到此就结束了
原版链接