前端面试题 用UNIAPP实现一个时间选择器，包括年(前5年后5年)、月日、时、分(间隔10分钟)

<template>
  <view>
    <picker mode="date" :start="startDate" :end="endDate" @change="onDateChange">
      <view class="picker">
        {{ currentDate }}
      </view>
    </picker>
    <picker mode="time" :start="startTime" :end="endTime" :minute-list="minuteList" @change="onTimeChange">
      <view class="picker">
        {{ currentTime }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '',
      currentTime: '',
      startDate: '',
      endDate: '',
      startTime: '',
      endTime: '',
      minuteList: []
    }
  },
  mounted() {
    this.initDate()
    this.initTime()
  },
  methods: {
    initDate() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      this.currentDate = `${year}-${month}-${day}`
      this.startDate = `${year - 5}-${month}-${day}`
      this.endDate = `${year + 5}-${month}-${day}`
    },
    initTime() {
      const now = new Date()
      const hour = now.getHours()
      const minute = now.getMinutes()
      this.currentTime = `${hour}:${minute}`
      this.startTime = '00:00'
      this.endTime = '23:59'
      for (let i = 0; i < 60; i += 10) {
        this.minuteList.push(i < 10 ? `0${i}` : `${i}`)
      }
    },
    onDateChange(e) {
      const date = e.detail.value
      this.currentDate = date
    },
    onTimeChange(e) {
      const time = e.detail.value
      this.currentTime = time
    }
  }
}
</script>

<style>
.picker {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #333;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
</style>

这段代码是一个Vue组件，它包含两个日期选择器和一个时间选择器。在组件的data属性中，有一些变量用于存储当前日期、当前时间、可选日期和可选时间。在组件的mounted方法中，会调用initDate和initTime方法来初始化这些变量。initDate方法会将当前日期设置为当前年月日，并将可选日期设置为当前日期的前五年到后五年。initTime方法会将当前时间设置为当前小时和分钟，并将可选时间设置为00:00到23:59，每隔10分钟一个选项。组件还包含两个方法，onDateChange和onTimeChange，用于在选择器的值更改时更新当前日期和时间。最后，组件还包含一些CSS样式，用于设置选择器的外观