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

发表时间：2021-1-11

发布人：葵宇科技

浏览次数：63

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

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

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

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

有什么功能

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

怎么使用

npm install select-time-range --save
复制代码

<template>
  <div id="app">
    <select-time @timeRange="getTimeRange" @change="handleChange" :data=http://www.wxapp-union.com/"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 = http://www.wxapp-union.com/[
        {
          'name': '周会',
          'start_time': '7:30',
          'end_time': '9:00'
        }]
    },
    getTimeRange (value) {
      this.selectDate = value
    }
}

复制代码