实现分钟固定步长5分钟一步

时间步数组件

<template>
    <el-popover
        placement="bottom"
        title=""
        width="70"
        trigger="click">
            <el-row class="MyTime">
                <el-col :span="12" class="myCol">
                    <p @click="hFn(item)" :class="h == item ? 'active' : ''" v-for="(item,index) in hList" :key="index">{{item}}</p>
                </el-col>
                <el-col :span="12" class="myCol">
                    <p @click="mFn(item)" :class="m == item? 'active' : ''" v-for="(item,index) in minList" :key="index">{{item}}</p>
                </el-col>
            </el-row>
        <el-input :readonly="true" style="width:120px" placeholder="选择时间" slot="reference" v-model="value"></el-input>
  </el-popover>
</template>

<script>
/* eslint-disable */
export default {
    props:['date'],
    data(){
        return {
            value:'',
            h:'',
            m:'',
        }
    },
    methods:{
        // 点击小时
        hFn(info){
            this.h = info
            this.dataChange()
        },
        // 点击分钟
        mFn(info){
            this.m = info
            this.dataChange()
        },
        // 数据变化
        dataChange(){
            if(this.h && this.m){
                this.value = `${this.h}:${this.m}`
            }
            
        }
    },
    computed:{
        minList(){
            return ['00','05','10','15','20','25','30','35','40','45','50','55']
        },
        hList(){
            let arr = []
            for(let i=0;i<=23;i++){
                if(i < 10){
                    arr.push(`0${i}`)
                }else{
                    arr.push(`${i}`)
                }
            }
            return arr
        },
    },
    watch:{
        value(n){
            this.$emit('change',n)
        }
    }
}
</script>



<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.MyTime .myCol::-webkit-scrollbar {display:none}

.MyTime .myCol{
    height: 150px;
    overflow-y: scroll;
}
.active{
   background-color: rgb(73, 158, 255);
}
.myCol p{
    cursor: pointer;
}
.myCol p:hover{
    color:blue;
}
</style>

使用

<template>
    <div>
      <MyTime ref="time"></MyTime>
      <el-button @click="showData">获取数据</el-button>
    </div>
</template>

<script>
/* eslint-disable */
import MyTime from './components/MyTime.vue'
export default {
  components:{
    MyTime
  },
  methods:{
    showData(){
      alert(this.$refs.time.value)
    }
  }
}
</script>

<style>

</style>

年月日时间拼接

import MyTime from '@/components/MyTime/MyTime.vue'

    getTeacherList(){
      this.oneTeacherList = []
      if(this.$refs.time && this.form.minute &&this.form.beginTimeyy&&this.queryParams.subjectId){
        const date = moment(this.form.beginTimeyy).format('YYYY-MM-DD')
      console.log(date,this.$refs.time.value,this.form.minute)
      let beginTime = `${date} ${this.$refs.time.value}:00`
      let minute = this.form.minute * 1
      let subjectId=this.queryParams.subjectId
      getTeacherList(beginTime,minute,subjectId).then(res => {
        this.oneTeacherList = JSON.parse(JSON.stringify(res.data))
      })
      }
    },