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>
相关推荐
向阳2563 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd6 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI6 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见8 分钟前
浅拷贝与深拷贝
前端
艾克马斯奎普特9 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~12 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪13 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡14 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克16 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
你的人类朋友17 分钟前
JS严格模式,启动!
javascript·后端·node.js