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>
相关推荐
CoderLiu19 分钟前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说22 分钟前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6661 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey1 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆1 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL2 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen2 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui