vue 封装一个鼠标拖动选择时间段功能

这篇具有很好参考价值的文章主要介绍了vue 封装一个鼠标拖动选择时间段功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue 封装一个鼠标拖动选择时间段功能,vue.js,计算机外设,javascript

vue 封装一个鼠标拖动选择时间段功能,vue.js,计算机外设,javascript

 文章来源地址https://www.toymoban.com/news/detail-611365.html

 

<template>
  <div class="timeRange">
    <div class="calendar">
      <table>
        <thead>
          <tr>
            <th rowspan="6" class="weekRow"><b>周/时间</b></th>
            <th colspan="24"><b>00:00 - 12:00</b></th>
            <th colspan="24"><b>12:00 - 24:00</b></th>
          </tr>
          <tr>
            <td colspan="2" v-for="index in 24" :key="index">{{ index - 1 }}</td>
          </tr>
        </thead>
        <tbody @mousemove.prevent="handleMouseMove">
          <tr v-for="(item, index) in weekDate" :key="index">
            <td>{{ item }}</td>
            <td class="calendar-atom-time" v-for="i in 48" :key="index + '-' + i"
                :class="{ 'active': selectCells[`${index}_${i}`] }" @mousedown.prevent="handleMouseDown(index, i, $event)"
                @mouseup.prevent="handleMouseUp(index, i)">
            </td>
          </tr>
          <div id="box" v-show="moveStartEvent"></div>
        </tbody>
      </table>
      <div class="table-core">
        <div class="clearfix">
          <span class="pull-left tip-text">可拖动鼠标选择时间段</span>
          <button class="clearBtn" @click="handleClear">清除所有</button>
        </div>
        <ul>
          <li v-for="(item, index) in selectDate" :key="index" v-if="item.data && item.data.length">
            <label>{{ item.label }}</label>
            <span v-for="o in item.data" :key="o">{{ o[0] }}~{{ o[1] }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'timeRange',
  data () {
    return {
      // 表列
      weekDate: ['一', '二', '三', '四', '五', '六', '日'],
      // 所选格子
      selectCells: {},
      // 所选时间数据(做提交时使用)
      selectDate: {},
      // 记录鼠标位置
      moveStartEvent: false,
      moveStartColumn: 0, // 列
      moveStarRow: 0, // 行
      moveStartX: 0,
      moveStartY: 0
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    // 初始
    init (data) {
      if (data && data instanceof Object) {
        this.selectCells = data
      } else {
        this.selectCells = {}
      }
      this.getSelectDate()
    },

    // 按下
    handleMouseDown (column, row, e) {
      this.moveStartEvent = true
      this.moveStartColumn = column
      this.moveStarRow = row
      this.moveStartX = e.layerX
      this.moveStartY = e.layerY
    },

    // 松开
    handleMouseUp (column, row) {
      if (this.moveStartEvent) {
        this.moveStartEvent = false
        const X = row - this.moveStarRow
        const Y = column - this.moveStartColumn
        const checked = !this.selectCells[`${column}_${row}`]

        if (X > -1 && Y > -1) {
          const obj = this.clone(this.selectCells)
          for (let i = this.moveStartColumn; i <= column; i++) {
            for (let j = this.moveStarRow; j <= row; j++) {
              var key = `${i}_${j}`
              if (checked) {
                obj[key] = checked
              } else if (obj[key]) {
                delete obj[key]
              }
            }
          }

          this.selectCells = obj
          this.$forceUpdate()
          this.getSelectDate()
        }
      }
      this.moveStartDay = 0
      this.moveStarTime = 0
    },

    // 滑动中
    handleMouseMove (e) {
      if (this.moveStartEvent) {
        const dom = this.$el.querySelector('#box')
        const X = e.layerX - this.moveStartX
        const Y = e.layerY - this.moveStartY
        if (X >= 0 && Y >= 0) {
          dom.style.left = this.moveStartX + 'px'
          dom.style.top = this.moveStartY + 'px'
          dom.style.width = X + 'px'
          dom.style.height = Y + 'px'
        }
      }
    },

    // 组合时间数据
    getSelectDate () {
      const arr = []
      this.weekDate.forEach((item, index) => {
        arr.push({
          label: item,
          data: []
        })
        for (var i = 1; i <= 48; i++) {
          var o = this.selectCells[`${index}_${i}`]
          if (o) {
            var endTime = i / 2
            var startTime = endTime - 0.5
            if (startTime < 10) {
              startTime = '0' + startTime
            }
            if (endTime < 10) {
              endTime = '0' + endTime
            }
            startTime += ''
            endTime += ''
            if (startTime.indexOf('.5') > -1) {
              startTime = startTime.replace('.5', ':30')
            } else {
              endTime = endTime.replace('.5', ':30')
            }
            if (startTime.indexOf(':30') < 0) {
              startTime += ':00'
            } else {
              endTime += ':00'
            }
            arr[index].data.push([startTime, endTime])
          }
        }
      })
      arr.forEach(item => {
        for (var i = 0; i < item.data.length; i++) {
          var o = item.data
          if (o[i + 1] && o[i][1] === o[i + 1][0]) {
            o[i + 1][0] = o[i][0]
            item.data.splice(i, 1)
            i--
          }
        }
      })
      this.selectDate = arr
    },

    // 清除选择
    handleClear () {
      this.selectCells = {}
      this.getSelectDate()
      this.$forceUpdate()
    },

    // 获取数据
    getData () {
      return this.selectDate
    }

  }
}
</script>

<style lang="less" scoped>
.timeRange {
  user-select: none;
  position: relative;
  padding: 10px 0;

  .calendar {
    display: inline-block;
  }

  table {
    width: 100%;
    border-radius: 4px;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;

    thead {

      th,
      td {
        height: 30px;
      }

      th {
        padding: 5px 0;

      }

      .weekRow {
        width: 100px;
        min-width: 100px;
        padding: 20px 0
      }
    }

    td,
    th {
      outline: 0;
      border: 1px solid #E3E3E3;
      font-size: 12px;
      text-align: center;
      min-width: 11px;
      line-height: 1.6em;
      min-width: 24px;
    }

    tbody {
      position: relative;
      overflow: hidden;

      td {
        height: 20px !important;
      }
    }

    td.active {
      background: #F60457;
    }
  }

  .table-core {
    line-height: 2.4em;
    border: 1px solid #E3E3E3;
    border-top: 0;
    overflow: hidden;
    padding: 10px;

    .clearfix {
      color: #8A8A8A;
      text-align: left;
      height: 22px;
      line-height: 22px;
      margin: 8px 0;
      display: flex;
      font-size: 12px;

      .clearBtn {
        cursor: pointer;
        color: #5775F9;
        font-size: 14px;
        margin-left: auto;
      }
    }

    ul {
      li {
        line-height: 22px;
        margin-bottom: 5px;

        label {
          display: inline-block;
          min-width: 60px;
          color: #8A8A8A;
          text-align: left;
        }

        span {
          font-size: 12px;

          &::after {
            content: "、"
          }

          &:last-child::after {
            display: none;
          }
        }
      }
    }
  }

  #box {
    background: rgba(241, 1, 85, 0.4);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

到了这里,关于vue 封装一个鼠标拖动选择时间段功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 小程序 picker 日期时间段选择(精确到年月日时分+周几)

    效果图: picker时间选择器 精确到年月日时分+周几 需要引入moment.js,有可能引入后在项目内会报错,可以考虑把选择日期作为一个组件引入 1、timepage.vue组件封装 2、官网下载moment.js 下载地址 3、需要显示时间组件的页面内引用时间组件

    2024年02月14日
    浏览(49)
  • 使用 ffmpeg 截取视频的某一个时间段内容

    使用 ffmpeg 截取视频的某一个时间段,可以结合以下3个选项: 使用 -ss 选项指定需要截取的开始时间,结合 -to 或者 -t。 to 指定结束的时间点,以下命令将截取视频文件 input.mp4 从 00:00:05.000 开始,到 00:00:15.000 结束这一段视频。 t 指定持续时间,以下命令将截取视频文件 in

    2024年02月05日
    浏览(41)
  • elementUI 时间段快捷选择及禁用(包含d2-crud-plus中使用)

    vue项目elementUI,需求为时间范围搜索,带快捷键并且只能选择今天之前,90天内的时间。搜索今天为实时数据,不能使用时间段,只能单独搜索。 ※注 需求是今天不可选,只有时间为空时才查询今天,所有下面代码中时间段快捷选择时,结束时间都是昨天。具体可根据自己需

    2024年01月25日
    浏览(36)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • 常用的时间段的时间戳

    获取 昨天这个时间的时间戳 计算今天0点的时间戳 计算今天23点59分59秒的时间戳 计算昨天0点的时间戳 计算昨天23:59:59 秒的时间戳 计算近7日 0点的时间戳(不包含当天) 计算近30天 0点的时间戳(不包含当天) 计算上月第一天 0点的时间戳 计算上月最后一天 23点的时间戳 计算上周

    2024年02月10日
    浏览(36)
  • 获取两个时间段之间的年月

     //获取两个时间段之间的年月         getMonthBetween(start,end){               var result = [];               var s = start.split(\\\"-\\\");               var e = end.split(\\\"-\\\");               var min = new Date();               var max = new Date();               min.setFullYear(s[0],s[1]);          

    2024年03月21日
    浏览(61)
  • 判断两个时间段是否有交集

    前言:项目中遇到了类似会议室预约的时间段被占用,预约车辆时间段被占用等。 start:预约开始时间。 end:预约结束时间。 必备条件:start = end 思考🤔: 怎么判断是否被占用呢? 预约的时间,与目标数据库中任意一条的存在交集,则可以视为占用。 有交集的情况有那几

    2024年02月03日
    浏览(64)
  • hive sql,年月日 时分秒格式的数据,以15分钟为时间段,找出每一条数据所在时间段的上下界限时间值(15分钟分区)

    获取当前的年月日 时分秒 date_format(时间字段, ‘yyyy-MM-dd HH:mm:ss’) 将时间字段转为 2023-10-18 18:14:16 这种格式 在指定时间上增加15分钟 unix_timestamp:获取当前时间的UNIX时间戳(从 1970-01-01 00:00:00 UTC 到指定时间的秒数),然后加上 15*60 秒,即15分钟,就得到了15分钟后的时间戳

    2024年02月08日
    浏览(47)
  • docker查询某时间段的日志

    参考:docker logs 查看docker容器日志详解_Mym_zuoyan_Tmac的博客-CSDN博客_docker logs 查找

    2024年02月16日
    浏览(47)
  • Linux查询指定时间段的日志

    Linux查询指定时间段的日志 可以通过grep或者sed命令查指定时间段日志 1.命令 命令: 2.举例 【例】查询今天10月20日10点30分的这一分钟的日志 第一步,可以先看下日志文件的格式 第二步,通过grep提取和匹配符合条件的字符串行 或者用sed查询 注意事项

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包