仿今日头条(巨量千川)时间区间选择器

Related tags

drag-weektime
Overview

drag-weektime

仿今日头条(巨量千川)时间区间选择器

原文地址(也不知是不是原作者):https://blog.csdn.net/weixin_43029824/article/details/111183153

如有侵权邮箱联系我,立马删除:[email protected]

这里自己根据原作者的组件进行了一些改造,觉得有用的盆油点个小星星

效果图

image

使用方法

import weektimeData from './data/weektime_data' import DragWeektime from '@/components/drag-weektime' ... components: { DragWeektime } ... computed: { mult_timeRange() { return this.weektimeData.map((item) => { return { id: item.row, week: item.value, value: splicing(item.child) } }) }, } function splicing(list) { let same let i = -1 const len = list.length const arr = [] if (!len) return while (++i < len) { const item = list[i] if (item.check) { if (item.check !== Boolean(same)) { arr.push(...['、', item.begin, '~', item.end]) } else if (arr.length) { arr.pop() arr.push(item.end) } } same = Boolean(item.check) } arr.shift() return arr.join('') } ">

import weektimeData from './data/weektime_data'
import DragWeektime from '@/components/drag-weektime'

... components: { DragWeektime }
... computed: {
  mult_timeRange() {
      return this.weektimeData.map((item) => {
        return {
          id: item.row,
          week: item.value,
          value: splicing(item.child)
        }
      })
    },
}

function splicing(list) {
  let same
  let i = -1
  const len = list.length
  const arr = []

  if (!len) return
  while (++i < len) {
    const item = list[i]
    if (item.check) {
      if (item.check !== Boolean(same)) {
        arr.push(...['、', item.begin, '~', item.end])
      } else if (arr.length) {
        arr.pop()
        arr.push(item.end)
      }
    }
    same = Boolean(item.check)
  }
  arr.shift()
  return arr.join('')
}

数据源的生成 weektime_data.js

const formatDate = (date, fmt) => {
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds(),
      'q+': Math.floor((date.getMonth() + 3) / 3),
      S: date.getMilliseconds()
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
      )
    }
    for (const k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
        )
      }
    }
    return fmt
  }
  
  const createArr = (len) => {
    return Array.from(Array(len)).map((ret, id) => id)
  }
  
  const formatWeektime = (col) => {
    const timestamp = 1542384000000 // '2018-11-17 00:00:00'
    const beginstamp = timestamp + col * 1800000 // col * 30 * 60 * 1000
    const endstamp = beginstamp + 1800000
  
    const begin = formatDate(new Date(beginstamp), 'hh:mm')
    const end = formatDate(new Date(endstamp), 'hh:mm')
    return `${begin}~${end}`
  }
  
  const data = [
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
    '星期日'
  ].map((ret, index) => {
    const children = (ret, row, max) => {
      return createArr(max).map((t, col) => {
        return {
          week: ret,
          value: formatWeektime(col),
          begin: formatWeektime(col).split('~')[0],
          end: formatWeektime(col).split('~')[1],
          row,
          col
        }
      })
    }
    return {
      value: ret,
      row: index,
      child: children(ret, index, 48)
    }
  })
  
  export default data

清空数据

clearWeektime() {
  this.weektimeData.forEach((item) => {
    item.child.forEach((t) => {
      this.$set(t, 'check', false)
    })
  })
},