如何实现一个拖动选择时间段的时间选择器

最新推荐文章于 2025-02-23 00:00:46 发布

yili54944

最新推荐文章于 2025-02-23 00:00:46 发布

阅读量1.7k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42213951/article/details/102602450

版权

本文详细介绍了如何设计并实现一个允许用户通过拖动来选择时间段的时间选择器。内容涵盖了交互设计、UI实现以及前端代码编写的关键步骤，帮助开发者创建更直观、用户友好的时间选择体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
      <!-- 高级时间设置 -->
      <div class="timerBox" >
            <div class="timers">
                <div class="timers_t">
                    <div class="timers_tl">星期\时间</div>
                    <div class="timers_tr">
                      <div class="timers_trt">
                          <h4>00:00 - 12:00</h4>
                          <h4>12:00 - 24:00</h4>
                      </div>
                      <div class="timers_trb">
                          <span v-for="(item,idx) in timerinfo.hour" :key="idx">{
   {
   item}}</span>
                      </div>
                    </div>
                </div>
                <div class="timers_b">
                    <div class="timers_bl">
                        <span v-for="(item,idx) in timerinfo.weeks" :key="idx">{
   {
   item}}</span>
                    </div>
                    <div class="timers_br" id="timecontainer"  @mousedown="mousedownfn">
                        <div  :class="item==1?'selected list':'list'"  @click="changeOne(item,idx)"  @click.stop v-for="(item,idx) in timeList" :key="idx"></div>
                    </div>
                </div>
            </div>
            <div class="timerTips">
                <div class="timerTips_l">
                    <i-button type="primary"  >已选</i-button>
                    <i-button type="ghost" >未选</i-button>
              </div>
                <div  class="timerTips_r">
                    <span style="margin-right:15px;" @click="timerClean()">反选</span>
                    <span @click="AllClean()">清除</span>
                </div>
            </div>
      </div>
  </div>
</template>
<script>
import $  from 'jquery'
export default {
   
  data() {
   
    return {
   
      timeList: this.timeString,
      keepList:[
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
        {
   week:[]},
      ],
      keepList2:[],
      keepList3:[],
      changX:0,//父级margin等造成的横坐标偏移量
      changY:0,//父级margin等造成的纵坐标偏移量
      offsetY:0,//父级滚动条滚动造成的纵坐标偏移量
      selectBoxDashed: null,
      startX: null,
      startY: null,
      initx: null,
      scrollX:null,
      scrollY:null,
      inity: null,
      timerinfo:{
   
          hour:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
          weeks:['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      },
    }
  },
  props: {
   
    baiduData: {
   
      type: Object,
      default() {
   
        var arr= {
   
          name:''
        };
        return arr
      }
    },
    tencentData: {
   
      type: Object,
      default() {
   
        var arr= {
   
          name:''
        };
        return arr
      }
    },
    timeString: {
   
      type: Array,
      default() {
   
        let _timeArray = []
        for (let i = 0; i < 336; i++) {
   
          _timeArray.push(0)
        }
        return _timeArray
      }
    },
  },
  model: {
   
    event: 'triggertime'
  },
  mounted () {
   
    if(this.baiduData.name=='baidu'){
   
       this.changX=205;
       this.changY

最低0.47元/天解锁文章