Vue3 +vant +van-picker自定义年月 组件

//子组件
<template>
  <div>
    <div class="dateTabBox">
      <span class="risk-title-date" @click="choiceRiskDate">
        {{ riskDetailValue }}
        <i class="lefJumpicon"></i>
      </span>
    </div>
    <!-- 选择年月 -->
    <van-popup v-model:show="choiceDate" round position="bottom">
      <van-picker title="选择年月" ref="picker" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
    </van-popup>
  </div>
</template>
<script lang="ts" setup>
import { inject, nextTick, reactive, Ref, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { checkModule } from "@/api";
import { AppModuleType } from "@/store/types";
import moment from "moment";

const app = inject<AppModuleType>("app");
const route = useRoute();
const router = useRouter();
let emit = defineEmits(["confirm", "cancel"]);
let props = defineProps({
  code: {
    type: Number,
    default: ""
  }
});
let fieldValue = ref();
let show = ref(true);
let noData = ref(false);
let loading = ref(true);
let newMonth = 0;
const choiceDate = ref(false);

//修改月格式，保持两位数显示
function modifyDate(m: any) {
  return m.split("-")[1] < 10 ? m.split("-")[0] + "-" + "0" + m.split("-")[1] : m;
}

/* 日期选择组件 开始 */
let riskDetailValue = ref<any>();
let riskDetailDate = ref();
let myDate = new Date();
let picker = ref<any>();
let thisYear: any = myDate.getFullYear();
let currentYear: any = myDate.getFullYear();
var myYear: any = myDate.getFullYear(); // 获取当年年份
// let thisYear: any = 2023; // 自定义年份,用于测试
let defaultIndex = ref(0);
let myMonth: any = [];
let currentMonth: string[] = [];

var arrYear: any[] = []; // 声明一个空数组 把遍历出的年份添加到数组里
let m = myDate.getMonth() + 1;
let d = myDate.getDate();
let showMonth = 0;
newMonth = 12;

if (d < 2) {
  // 如果不是5号之后，则展示上上个月，否则显示上个月
  if (m === 1) {
    riskDetailValue.value = `${thisYear - 1}-${newMonth - 1}`;
    showMonth = newMonth - 1;
  } else if (m === 2) {
    riskDetailValue.value = `${thisYear - 1}-${newMonth}`;
    showMonth = newMonth;
  } else {
    riskDetailValue.value = modifyDate(`${thisYear}-${m - 2}`);
    showMonth = m - 2;
  }
  if (app?.app.orgDate) {
    riskDetailValue.value = app?.app.orgDate;
  } else {
    app?.setEasyDetailDate(riskDetailValue.value);
  }
} else {
  if (m === 1) {
    riskDetailValue.value = `${thisYear - 1}-${newMonth}`;
    showMonth = newMonth;
  } else {
    riskDetailValue.value = modifyDate(`${thisYear}-${m - 1}`);
    showMonth = m - 1;
  }
  if (app?.app.orgDate) {
    riskDetailValue.value = app?.app.orgDate;
  } else {
    app?.setEasyDetailDate(riskDetailValue.value);
  }
}

riskDetailDate.value = thisYear;
let columns: any = [];

const pickerDate = () => {
  if (myYear === 2021) {
    myMonth = ["1月", "8月", "10月", "11月", "12月", "全年"];
    currentMonth = myMonth;
    defaultIndex.value = 0;
  } else {
    if (myYear === currentYear) {
      myMonth = [];
      for (var i = 1; i <= showMonth; i++) {
        myMonth.push(`${i}月`);
        if (i === showMonth) {
          myMonth.push(`YTD`);
        }
      }
      currentMonth = myMonth;
      defaultIndex.value = currentMonth.length - 2;
    }
    if (myYear !== currentYear) {
      myMonth = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
        "全年"
      ];
      currentMonth = myMonth;
      defaultIndex.value = 0;
    }
  }
  let section = thisYear - 2021; // 声明一个变量 获得当前年份至想获取年份差

  for (var i = 0; i <= section; i++) {
    // 遍历并添加年份到数组
    arrYear.unshift(thisYear--);
  }

  columns = [
    // 第一列
    {
      values: arrYear,
      defaultIndex: arrYear.length
    },
    // 第二列
    {
      values: currentMonth,
      defaultIndex: defaultIndex
    }
  ];
};
pickerDate();

const onConfirm = async (value: any, index: any) => {
  riskDetailValue.value = modifyDate(`${value[0]}-${value[1].split("月")[0]}`);
  riskDetailDate.value = riskDetailValue.value;
  choiceDate.value = false;
  app?.setEasyDetailDate(riskDetailValue.value);
  let { code } = await checkModule(
    app?.app.easyControlVersion,
    app?.app.easyModeCode,
    riskDetailValue.value
  );
  emit("confirm", { code: code });
};

const onCancel = () => {
  emit("cancel");
  choiceDate.value = false;
};

const onChange = (value: any, index: any) => {
  myYear = value[0];
  pickerDate();
  nextTick(() => {
    picker.value.setColumnValues(1, currentMonth);
  });
};

const choiceRiskDate = () => {
  pickerDate();
  choiceDate.value = true;
};
</script>
<style lang="less" scoped>
.dateTabBox {
  text-align: center;
  position: relative;
  z-index: 999 !important;
}
.risk-title-date {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999;
  letter-spacing: 0;
  text-align: right;
  line-height: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lefJumpicon {
  width: 12px;
  height: 12px;
  display: inline-block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKqADAAQAAAABAAAAKgAAAADUGqULAAADH0lEQVRYCe2XPWiTQRjH81EjiKF0UxR0cOjilimaj1oTacFBKhaHiiIdSgcVpIOTg7ZDBwVFIUoHlWJBUAcFo5AvE1EjOhiXgKNC8JMIJalJ/B3yhJeX+Jo0XlIwgev/nucud7/87957rzZb79NzoOfA/+WAXcfPTSQS09Vq9bzdbn9Zq9UODw0NfWp3Hke7AzT6PnCz5PvRvcCmMpnMlkb9WsnpAn0tEMAOlsvlp7FYbIfkVqNaQF0u1yGcfCNAwG5XzrIldkquVdWyRxVENpvtLxaLD6juEihgvzqdzhGfz/dccs2qFkfV5B6P57vb7Q4DFxUYnB2oVCpPcHaP5JpVbY4KQC6XcxUKhUXiMcmhJZwd9/v99w05y6p2UDU7Tjpx8Rp6TGhw+qeKObpuSc5KtS29cVKgKoFA4LjD4bgoeSD7yN9QZ67krLQjoAoAqBqwp4A9K0DA2nkxXI7H42ck9yftyNKbJ8fFE0BeUKDSxg+ZDwaDMxKbtd7R3KA75gVwlDmuU5wyF7ARXJ9Cq5IT7RqoAkgmk2Ms/SLOugQIXeJYm+B4WzHkbF0FVSBsgzCgdykbBAxHH/J2O+j1epcl17GHSSY0K0sdBSxE+SZtQI+WSqWbEivtOqiCADYD6DlVlw/xPqkrXROgLP84Ls4ZwagvGOOug3KGTgKpHqh1AoabV3D5pMRKuwrKEXUawAilzgHkHOfpNFpbE6BAqj05b4QBbgbIhm+pjh9PuGdnuS8BWH/HA1ilTLHcESO4sd5RUFxUF5EFYCcEgniF+Ai3qNuSa6T1vdGo8V/m8vn8esa7Y4Jc5pJy4G+QiqMjjuLkRua6RxlWk6oPThaB3M/lOfE7Y/23fiGw7rb61lQqNYCLjxjBbxjlM/UQD84zQ86yqtVRnNyEc1FA6/99En/AyRBOvrMkMzVq26PpdHobUCkT5Htyu1uFVMxaHMXJQYAeA7lVjCF+i5NhID9KrhXta6Vzs32BWjJBvuDaNsK17UuzY5j76Vr6zTIR0DGgh9uBVGNpAWWJJxn7FZBXgRzlnPwh4D3tOdBzoMsO/AKRHCACuJjnRgAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>


//父组件调用
<template>
   <vant-select-picker @confirm="confirm" @cancel="cancel"></vant-select-picker>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { inject, onMounted, onUnmounted, reactive, ref } from "vue";
import NoData from "@/views/components/noData.vue";
import VantSelectPicker from "@/views/components/VantSelectPicker.vue";
import { AppModuleType } from "@/store/types";
import { getHotelTopFive2, getLackOfPost, getTrainDashBoard2, getUnComplete } from "@/api";
import "@/utils/buriedPoint.js";
import { _clearRight, _setFeiShuTitle } from "@/utils/feishuhelper.js";

const app = inject<AppModuleType>("app");

type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
let isShowEcharts = ref(true);
const showRule = ref(false);
let loading = ref(true);
let showTop5Dialog = ref(false);
let showHotelDialog = ref(false);
let count = 0;
let easyControlEmployeeNo: string[] = [];
let easyControlName: string[] = [];
let easyControlPositionNameCn: string[] = [];
let isLastLevel = ref(false);




const confirm = (code: any) => {
 //事件
};

const cancel = () => {};


</script>
<style lang="less" scoped>

</style>