vant4+vue3周期选择器组件

<!-- 周期选择组件 -->
<template>
    <!-- 周选择 -->
    <div class="dataWeeks">
      <van-picker
        title="选择周期"
        v-model="allData.selectedValues"
        :columns="allData.columns"
        @cancel="cancel"
        @confirm="onConfirm2"
        @change="change"
        class="weekSelects"
      />
    </div>
</template>
  
  <script setup name="dataWeeks">
  import moment from "moment";
  import "moment/locale/zh-cn";
  moment.locale("zh-cn");
  import { reactive, onMounted } from 'vue';
  
  const emit = defineEmits(['onConfirm2', 'cancel']);
  //数据对象
  const allData = reactive({
    lastSelectYear:"",//最后一次选择的年份，用于判断是否需要重新来取整年的年份
    selectedValues: [],//选择的周期
    columns: [
      {
        values: [],
        className: 'column1',
      },
      {
        values: [],
        className: 'column2',
      },
    ],
  });
  // 获取一年的周次列表
const weelys = (year) => {
  const firstDayOfYear = moment(year + '-01-01');
  const firstWeekStart = firstDayOfYear.startOf('isoWeek').format('YYYY-MM-DD');
  const firstWeekEnd = firstDayOfYear.endOf('isoWeek').format('YYYY-MM-DD');
  let firstWeekStartFormat = firstDayOfYear.startOf('isoWeek').format('MM/DD');
  let firstWeekEndFormat = firstDayOfYear.endOf('isoWeek').format('MM/DD');
  const weeks = [];
  let currentWeekStart = firstWeekStart;
  let currentWeekEnd = firstWeekEnd;
  
  while (currentWeekEnd.indexOf(year) !== -1) {
    if(currentWeekStart.indexOf(year) == -1){
      if(moment(currentWeekStart).isoWeek()!=1){
        weeks.push({
          value: currentWeekStart,
          text: (Number(year)-1)+`年第${moment(currentWeekStart).isoWeek()}周(${firstWeekStartFormat}-${firstWeekEndFormat})`
        });
      }else{
        weeks.push({
          value: currentWeekStart,
          text: `第${moment(currentWeekStart).isoWeek()}周(${firstWeekStartFormat}-${firstWeekEndFormat})`
        });
      }
    }else{
       weeks.push({
        value: currentWeekStart,
        text: `第${moment(currentWeekStart).isoWeek()}周(${firstWeekStartFormat}-${firstWeekEndFormat})`
      });
    }
    
    const nextWeekStart = moment(currentWeekStart).add(1, 'week').format('YYYY-MM-DD');
    const nextWeekEnd = moment(currentWeekEnd).add(1, 'week').format('YYYY-MM-DD');
    firstWeekStartFormat = moment(currentWeekStart).add(1, 'week').format('MM/DD');
    firstWeekEndFormat = moment(currentWeekEnd).add(1, 'week').format('MM/DD');
    currentWeekStart = nextWeekStart;
    currentWeekEnd = nextWeekEnd;
  }
  
  return weeks;
};

  /**
   * 获取周期年份数据
   */
const setData = () => {
  const defaultData = moment(moment());
  const currentYear = moment().format('YYYY');
  const currentDay = moment().startOf('isoWeek').format('YYYY-MM-DD');
  const startYear = moment().subtract(5, 'years').format('YYYY');
  const endYear = moment().format('YYYY');
  
  allData.columns[0] = [];
  for (let i = startYear; i <= endYear; i++) {
    allData.columns[0].push(i);
  }
  allData.columns[0].reverse();
  const selectedYear = allData.selectedValues[0] || currentYear;
  allData.columns[1] = weelys(selectedYear);
  allData.columns[0] = allData.columns[0].map((item) => {
    return {
      text: String(item),
      value: String(item),
    };
  });
  allData.selectedValues=[selectedYear,currentDay];
};
/**
 * 确定提交
 */
  const onConfirm2 = (value, index) => {
    // 这个就是选择确定 然后把value这个取到的值 通过confirm方法传递给父组件
    emit('onConfirm2', value);
  };
  /**
   * 取消选择
   */
  const cancel = () => {
    emit('cancel');
  };
  /**
   * 周期滑动
   */
  function change(selectedValues){
    const selectedYear = allData.selectedValues[0];
    if(allData.lastSelectYear !=selectedYear){
      allData.lastSelectYear  = selectedYear;
      allData.columns[1] = weelys(selectedYear);
    }
  }
  onMounted(() => {
    setData();
  });
  </script>
  <style lang="less">
  .dataWeeks {
    .weekSelects {
       .van-picker-column__item {
        .van-ellipsis {
          height: 44px;
          line-height: 44px;
        }
      }
    }
  }
  </style>
  
  

组件使用：

 <WeekSelect    @onConfirm2="onConfirmWeek" @cancel="onCancelWeek"/>

效果如下：