利用 vant 封装精确到秒的时间选择器，让 vue 开发更简单

前言

在移动开发中，时间选择的控件比比皆是，但却鲜有类似的组件可以精确到秒级别的，官方可能是考虑到小屏幕手机的显示问题，也可能是使用的场景寥寥无几，但是少不代表没有，所以最近花了点时间基于 vant 组件库封装了一个可以精确到秒级别的时间选择器。

---

实现思路

本章我们主要用到了 vant 组件库中的 Popup 弹出层组件搭配 DatetimePicker 组件进行时间选择。通过 props 和 emit 进行组件之间的通信。其实 vant 已经封装好一系列的代码了，我们需要修改的是自定义年月日时分秒的时间数据并将其添加到绑定的数组中即可。话不多说，下面直接看代码的实例。

---

封装文件

文件目录：src/components/timePicker

<template>
  <div>
    <!-- 弹出层 -->
    <van-popup get-container="body" v-model="isPicker" position="bottom" @close="confirmOn">
      <!-- 时间选择 -->
      <van-picker ref="picker" show-toolbar title="请选择时间" :columns="columns" @change="onChange" @cancel="cancelOn" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "popup",
  props: ["showPicker", "values"],
  data() {
    return {
      isPicker: false, //是否显示弹出层
      columns: [], //所有时间
      Mdays: "", //弹窗关闭时月份所在值
      Dindex: null,
    };
  },
  watch: {
    isPicker(val) {
      !val && this.$emit("changeValue");
      this.columns = [];
      this.getcolumns();
    },
    showPicker(val) {
      this.isPicker = val;
    },
    values(val) {
      if (val == "") {
        this.Mdays = "";
        this.Dindex = null;
      }
    },
  },
  methods: {
    getCountDays(year, month) {
      //获取某年某月多少天
      var day = new Date(year, month, 0);
      return day.getDate();
    },
    getcolumns() {
      var strtime = this.values;
      var date = new Date(strtime.replace(/-/g, "/"));
      var vmoduletime = date.getTime();
      if (this.values != "") {
        var vmoduledate = new Date(vmoduletime);
      } else {
        var vmoduledate = new Date(); //没有传入时间则默认当前时刻
      }
      var Y = vmoduledate.getFullYear();
      var M = vmoduledate.getMonth();
      var D = vmoduledate.getDate();
      var h = vmoduledate.getHours();
      var m = vmoduledate.getMinutes();
      var s = vmoduledate.getSeconds();
      var year = {}; //获取前后十年数组
      year.values = [];
      var Currentday = new Date().getFullYear();
      for (var i = Currentday - 10; i < Currentday + 10; i++) {
        year.values.push(i + "年");
      }
      year.defaultIndex = year.values.indexOf(Y + "年"); //设置默认选项当前年
      this.columns.push(year);
      var month = {}; //获取12月数组
      month.defaultIndex = M;
      month.values = Object.keys(Array.apply(null, { length: 13 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item + "月";
          } else if (+item + 1 == 11) {
            return +item + "月";
          } else {
            return (+item + 0).toString() + "月";
          }
        }
      );
      month.values.splice(0, 1);
      this.columns.push(month);
      //获取当月的天数
      var days = this.getCountDays(Y, this.Mdays == "" ? M + 1 : this.Mdays);
      var day = {}; //创建当月天数数组
      day.defaultIndex = this.Dindex == null ? D - 1 : this.Dindex;
      day.values = Object.keys(Array.apply(null, { length: days + 1 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item + "日";
          } else if (+item + 1 == 11) {
            return +item + "日";
          } else {
            return (+item + 0).toString() + "日";
          }
        }
      );
      day.values.splice(0, 1);
      this.columns.push(day);
      var hour = {}; //创建小时数组
      hour.defaultIndex = h;
      hour.values = Object.keys(Array.apply(null, { length: 24 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item + "时";
          } else if (+item + 1 == 11) {
            return +item + "时";
          } else {
            return (+item + 0).toString() + "时";
          }
        }
      );
      this.columns.push(hour);
      var mi = {}; //创建分钟数组
      mi.defaultIndex = m;
      mi.values = Object.keys(Array.apply(null, { length: 60 })).map(function (
        item
      ) {
        if (+item + 1 <= 10) {
          return "0" + item + "分";
        } else if (+item + 1 == 11) {
          return +item + "分";
        } else {
          return (+item + 0).toString() + "分";
        }
      });
      this.columns.push(mi);
      var ss = {}; //创建秒数数组
      ss.defaultIndex = s;
      ss.values = Object.keys(Array.apply(null, { length: 60 })).map(function (
        item
      ) {
        if (+item + 1 <= 10) {
          return "0" + item + "秒";
        } else if (+item + 1 == 11) {
          return +item + "秒";
        } else {
          return (+item + 0).toString() + "秒";
        }
      });
      this.columns.push(ss);
    },
    onChange(values, a) {
      //a为所有列备选项值的数组
      var days = this.getCountDays(a[0].substr(0, 4), a[1].substr(0, 2));
      var newdays = {};
      newdays.values = Object.keys(Array.apply(null, { length: days + 1 })).map(
        function (item) {
          if (+item + 1 <= 10) {
            return "0" + item + "日";
          } else if (+item + 1 == 11) {
            return +item + "日";
          } else {
            return (+item + 0).toString() + "日";
          }
        }
      );
      newdays.values.splice(0, 1);
      this.$refs.picker.setColumnValues(2, newdays.values); //设置第三列的值
      this.$refs.picker.setColumnIndex(2, a[2].substr(0, 2) - 1); //设置第三列索引
    },
    // 关闭弹框
    confirmOn() {
      var currentM = this.$refs.picker.getColumnValue(1);
      this.Mdays = currentM.substr(0, 2);
      this.Dindex = this.$refs.picker.getColumnIndex(2);
    },
    //时间选择器关闭
    cancelOn() {
      this.$emit("changeValue");
    },
    // 时间选择器确定
    onConfirm(val, index) {
      var endval =
        val[0].substr(0, 4) +
        "-" +
        val[1].substr(0, 2) +
        "-" +
        val[2].substr(0, 2) +
        " " +
        val[3].substr(0, 2) +
        ":" +
        val[4].substr(0, 2) +
        ":" +
        val[5].substr(0, 2);
      this.$emit("changeValue", endval);
      this.$emit("confirm", endval);
    },
  },
};
</script>

---

使用组件

<template>
  <div>
    <div @click="timePickerShow = true">点击选择时间</div>
    <timePicker :values="timeVal" @changeValue="timePickerShow = false" ref="popup" :showPicker="timePickerShow" @confirm="confirmOn" />
  </div>
</template>
<script>
import timePicker from "@/components/timePicker";
export default {
  components: {
    timePicker,
  },
  data() {
    return {
      timeVal: "", //选中时间的值
      timePickerShow: false, //打开/关闭时间选择器
    };
  },
  methods: {
    // 时间选择器确定
    confirmOn(val) {
      console.log(val);
    },
  },
};
</script>

---

实现效果