工作记录---自定义vant年时间选择器

• 工作中需要用到单独是年的时间选择器,发现vant中唯独没有年的,所以自己写了一个,也不难,就是弹出层和选择器组合,为方便后续用,所以记录.
• 如果是按需引入,需要引入Popup 弹出层和Picker 选择器

<template>
  <div>
    <div class="navigate between_center">
      <div class="timeSelect">
        <div class="datetimePicker flex_items_center" @click="show = true">
          点我啊
          <van-icon name="play" style="transform: rotate(90deg)" />
        </div>
      </div>
    </div>
    <!-- ====重点是下面这段,上面只是触发打开==== -->
    <van-popup v-model="show" position="bottom" round>
      <van-picker
        title="选择选项时段"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,//控制弹出层
      // 显示在选择器的数据
      columns: ["2015", "2016", "2017", "2018", "2019", "2020", "2021"],
    };
  },
  methods: {
    //确认时触发
    onConfirm(value, index) {
      // let date=new Date(value)//获取的数值可以转日期,再根据自己需求格式化日期
      this.show = false;//这个是关闭弹窗
      this.$toast(`当前值：${value}, 当前索引：${index}`);
    },
    // 改变时触发
    onChange(picker, value, index) {
      this.$toast(`当前值：${value}, 当前索引：${index}`);
    },
    // 取消时触发
    onCancel() {
      this.show = false;
      this.$toast("取消");
    },
  },
};
</script>

<style lang="less">
// 头部导航
.navigate {
  display: flex;
  background: #fbfbfb;
  // padding: 40px 44px 30px 44px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 400;
  // 时间选择
  .timeSelect {
    .datetimePicker {
      font-size: 38px;
      font-weight: 400;
      color: #666666;
    }
    span {
      margin-right: 8px;
      img {
        width: 30px;
        height: 30px;
      }
    }
    i {
      font-size: 14px;
    }
  }
  // 支出金额
  .optionTime {
    padding: 4px 18px;
    font-weight: 400;
    color: #fff;
    background: #fb9d60;
    border-radius: 24px;
    i {
      margin-left: 2px;
    }
  }
}
// 时间选择弹出框
.van-picker {
  // 按钮大小
  button {
    font-size: 36px;
    font-weight: 400;
    color: #ff8f1f;
  }
  .van-picker__toolbar {
    height: 80px;
    button {
      font-size: 30px;
    }
    .van-picker__title {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 36px;
      font-weight: 400;
      color: #333333;
    }
  }
  // 日历日期文字大小
  .van-ellipsis {
    font-size: 38px;
    font-weight: 400;
    color: #333333;
  }
  // 时间背景色
  .van-hairline-unset--top-bottom::after {
    background-color: brown;
    background: rgba(255, 143, 31, 0.17);
    opacity: 0.35;
    border-radius: 10px;
  }
}
</style>