用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

用vue開發一個時間范圍選擇組件

Rolan 2020-7-2 00:20

最近公司內部需要做個會議室預定的小程序,了解大概的需求之后,就開始上手開發小程序直接用 uni-app 開發,簡單暴力,會vue的直接能上手擼了開發完以后,覺得選擇時間組件還不錯,就考慮開源了,有需求的就可以幫忙 ...

最近公司內部需要做個會議室預定的小程序,了解大概的需求之后,就開始上手開發

小程序直接用 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

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: Zorr0 來自: 掘金
快乐十分复式