用vue开发一个时间范围选择组件

6,326 阅读1分钟

最近公司内部需要做个会议室预定的小程序,了解大概的需求之后,就开始上手开发

小程序直接用 uni-app 开发,简单暴力,会vue的直接能上手撸了

开发完以后,觉得选择时间组件还不错,就考虑开源了,有需求的就可以帮忙省点时间,早点下班回家

先看一下组件, 在线预览 戳我

有什么功能

  1. 可以选择日期范围,例如: [今天开始 - 7天之后]
  2. 可以设置开始时间和结束时间 例如:[8:00 - 22:00]
  3. 根据接口返回的预定列表,显示到组件中,已预定的时间禁止选中,这样就不会预定重叠了
  4. 其它的可以安装之后自己去体验

怎么使用

npm install select-time-range --save
<template>
  <div id="app">
    <select-time @timeRange="getTimeRange" @change="handleChange" :data="data" :range="range" :start-time="startTime" :end-time="endTime"></select-time>

    <p>当前选择的日期为: {{selectDate.date}} 【{{selectDate.start_time}} -- {{selectDate.end_time}}】</p>
  </div>
</template>

import selectTime from 'select-time-range'

components: {
    selectTime
}

data () {
    return {
      range: '7',
      startTime: '7:00',
      endTime: '23:00',
      selectDate: {},
      data: []
    }
  },
methods: {
    handleChange (e) {
      this.data = [
        {
          'name': '周会',
          'start_time': '7:30',
          'end_time': '9:00'
        }]
    },
    getTimeRange (value) {
      this.selectDate = value
    }
}

具体的事件和属性,可以到github上查看 select-time-range