baby-app/src/components/picker-time/picker-time.vue

<template>
  <wd-datetime-picker
    :title="title"
    :size="size"
    :label="label"
    v-model="value"
    confirm-button-text="确认"
    :formatter="formatterFn"
    @confirm="emit('confirm')"
  />
</template>

<script setup>
  import { defineEmits } from 'vue'
  defineOptions({
    name: 'PickerTime',
  })
  const props = defineProps({
    columns: {
      type: Array,
      required: true,
    },
    size: {
      type: String,
      default: 'large',
    },
    type: {
      type: String,
      default: 'date',
    },

    label: {
      type: String,
      default: '',
    },
  }) // 定义事件
  const formatterFn = (type, value) => {
    switch (type) {
      case 'year':
        return value + '年'
      case 'month':
        return value + '月'
      case 'date':
        return value + '日'

      default:
        return value
    }
  }
  const title = defineModel('title')
  const value = defineModel('value')
  const emit = defineEmits('confirm') // 处理 Picker 确认操作
</script>

<style scoped lang="scss">
  ::v-deep .wd-picker__cell {
    padding-right: 32rpx;
    padding-left: 32rpx;
  }
</style>