vue 实现移动端年周时间选择

使用组件

Vant 是有赞前端团队开源的移动端组件库，点击跳转

样式实现

代码实现

<template>
    <div id="root">
        <van-nav-bar left-arrow   @click-left="returnHandle()">
            <template #title>
                <span class="nav-title">统计分析</span>
            </template>
        </van-nav-bar>
        <div class="statistical-top">
            <div class="top-time">
                <div class="top-time-left">
                    时间:{
   {
   time}}
                </div>
                <div class="top-time-right">
                    <div class="top-time-right-arrow" @click="arrowtitleHanlde"  style="flex:1" >
                        <span :class="arrowTitle?'top-time-right-arrow-title':' top-time-right-arrow-title-active'">{
   {
   arrowTitledetail}}</span>
                    </div>
                    <div @click="arrowtimeHanlde"  class="top-time-right-arrow" style="flex:1.1">
                        <span :class="arrowTime?'top-time-right-arrow-time':' top-time-right-arrow-time-active'">{
   {
   arrowTimedetail}}</span>
                    </div>
                </div>
            </div>

        </div>
        <!-- columns -->
        <van-action-sheet v-model="arrowTitle">
          <van-picker
              title="查询数据"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onChange"
            />
        </van-action-sheet>
        <van-action-sheet v-model="arrowTime">
            <van-picker
                class="week"
                show-toolbar
                title="选择日期"
                :columns="columns4"
                @change="onChange5"
                @confirm="onConfirm5"
                @cancel="onCancel5"
                 />
        </van-action-sheet>
    </div>
</template>
<script>
export default {
   

  data() {
   
    return {
   
      columns4: [],
      year: [2021, 2022, 2023, 2024, 2025, 2026]