javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > vant倒序年月日期组件封装

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

作者: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倒序年月日期组件封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文