vue年月日时间切换按钮(带日期选择器)组件

实际效果图如下所示

代码如下:

<template>
  <div>
    <!--头部-->
    <a-row class="topContainer">
      <div class="topTxt">
        <div class="txtLeft">
          <a-input-group compact>
            <!--<a-input class="txtValue" disabled :default-value='newName' v-model:value="newName"/>-->
            <!--日历组件-->
            <a-date-picker
              class="dateTime"
              @change="onChange"
              v-if="dateParam === 'day' || dateParam == ''"
              :default-value="
                defaultTime ? moment(defaultTime, dateFormat) : undefined
              "
            />
            <a-month-picker
              class="dateTime"
              @change="onChange"
              v-else-if="dateParam === 'month'"
              :default-value="
                defaultTime ? moment(defaultTime, monthFormat) : undefined
              "
            />
            <a-date-picker
              v-else-if="dateParam === 'year'"
              class="dateTime"
              mode="year"
              :format="yearFormat"
              :value="yearPick"
              :open="yearPickShow"
              @panelChange="handlePanelChange"
              @openChange="handleOpenChange"
            />
          </a-input-group>
        </div>
        <div class="btnGroup">
          <a-button-group>