vant倒序年月日期组件封装实例详解

 更新时间:2024年03月08日 10:12:14   作者:Y丶小琪  
这篇文章主要介绍了vant倒序年月日期组件封装实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

如图,时间选择,倒序排列。时间格式  202312,可以根据自己的格式改一下数据处理方式

组件:

<template>
  <div class="number">
    <van-cell-group>
      <van-field class="date-select" readonly clickable v-model="date" placeholder="选择时间"
        @click="showPicker = true" />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker class="picker" show-toolbar :columns="columns" @change="onChange"
          @cancel="showPicker = false" @confirm="onConfirm">
        </van-picker>
      </van-popup>
    </van-cell-group>
  </div>
</template>
  <script>
export default {
  name: 'DateSelect',
  props: {
    default: {
      type: String,
      default: ''
    },
    minYear: {
      type: String,
      default: '2014'
    }
  },
  data() {
    return {
      date: this.default,
      initTime: this.minYear,
      columns: [],
      checkTime: {},
      showPicker: false
    }
  },
  created() {
    this.initTimeFn()
  },
  methods: {
    initTimeFn() {
      const initTime = this.initTime
      const defaultYear = this.default.substring(0, 4)
      const defaultMonth = this.default.substring(4)
      // for (let i = 0; i <= Number(new Date().getFullYear()) - initTime; i++) {
      for (let i = Number(new Date().getFullYear()); i >= initTime; i--) {
        this.checkTime[`${i}年`] = [
          '01月',
          '02月',
          '03月',
          '04月',
          '05月',
          '06月',
          '07月',
          '08月',
          '09月',
          '10月',
          '11月',
          '12月'
        ]
      }
      const yearIndex = Object.keys(this.checkTime).findIndex((item) =>
        item.includes(defaultYear)
      )
      this.columns = [
        {
          values: Object.keys(this.checkTime),
          defaultIndex: yearIndex //Number(new Date().getFullYear()) - initTime
        },
        {
          values: this.checkTime[`${new Date().getFullYear()}年`],
          defaultIndex: Number(defaultMonth) //new Date().getMonth()
        }
      ]
    },
    onCancel() {
      this.showPicker = false
    },
    onConfirm(value) {
      this.showPicker = false
      let year = value && value[0].split('年')[0]
      let month = value && value[1].split('月')[0]
      this.date = this.userListForm = `${year}${month}`
      this.$emit('getDate', this.userListForm)
    },
    onChange(picker, values) {
      picker.setColumnValues(1, this.checkTime[values[0]])
    }
  }
}
</script>
  <style lang="less">
.number {
  width: 2.4rem;
  .picker {
    font-size: 0.32rem;
  }
  .van-cell {
    padding: 0;
  }
  .date-select {
    border: 1px solid rgb(74, 119, 246);
    padding-left: 0.1rem;
    border-radius: 0.1rem;
    font-size: 0.32rem;
    line-height: 1.5;
  }
}
</style>

使用:

  <DateSelect @getDate="getDate" default="202312" />
  getDate(date) {
      this.date = date    //自己组件使用的时间变量
      this.getList()
    },

到此这篇关于vant倒序年月日期组件封装的文章就介绍到这了,更多相关vant倒序年月日期组件封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

最新评论