vue中实现一个时间选择器的级联框,第一层小时,第二层分钟

最近在做一个考勤系统时,新增班次的时候需要设置打卡时段,类似如下效果:

1、封装自定义组件Time.vue

接收参数有endHour(范围结束的小时数)、endMinute(最后一小时结束的分钟数)等,根据具体需求变动

html 复制代码
<template>
  <div>
    <el-cascader :options="options" v-model="selectedTime" @change="handleTimeChange" placeholder="请选择时间"></el-cascader>
  </div>
</template>

<script>
export default {
  props: {
    endHour: Number,
    endMinute: Number
  },
  data () {
    return {
      selectedTime: [],
      options: []
    }
  },
  watch: {
    selectedTime () {
      let minutes = this.selectedTime ? this.selectedTime[0] * 60 + this.selectedTime[1] : ''
      this.$emit('input', minutes)
    },
  },
  created() {
    this.generateTimeOptions()
  },
  methods: {
    generateTimeOptions () {
      this.options = []
      const startHour = 0; // 范围开始的小时数
      const endHour = this.endHour; // 范围结束的小时数
      const startMinutes = 1; // 范围开始的分钟数
      const interval = 1; // 小时的间隔
      const minutesInterval = 1; // 分钟的间隔
      for (let hour = startHour; hour <= endHour; hour += interval) {
        const hourValue = hour;
        const hourLabel = `${hourValue}小时`;
        const hourOption = {
          value: hourValue,
          label: hourLabel,
          children: []
        };
        let endMinute;
        if (hour === this.endHour) {
          // 如果是最后一个小时,设置特定范围的分钟数
          endMinute = this.endMinute; // 设置最后一个小时的结束分钟数
        } else {
          endMinute = 59; // 其他小时的结束分钟数为30
        }
        for (let minutes = hour === 0 ? startMinutes : 0; minutes <= endMinute; minutes += minutesInterval) {
          const minutesValue = minutes;
          const minutesLabel = `${minutesValue}分钟`;
          const minutesOption = {
            value: minutesValue,
            label: minutesLabel
          };
          hourOption.children.push(minutesOption);
        }
        this.options.push(hourOption);
      }
    },
  
    handleTimeChange (value) {
      // 处理选中时间的逻辑
      let timeValue = {}
      timeValue.orginValue = value
      timeValue.minutes = value[0] * 60 + value[1]
      this.$emit('timeChange', { timeValue })
    }
  }
}
</script>

2、使用

引入注册组件后使用,传入动态参数,监听timeChange方法可以拿到当前选择的时间

html 复制代码
<Time :endHour="12" :endMinute="59" @timeChange="handleTimeChange"></Time>
相关推荐
永乐春秋29 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿30 分钟前
【前端】CSS
前端·css
ggdpzhk32 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app