1 .给出两个时间段，还有算间隔的时间，然后返回可以选择的列表

<template>
    <div class="time">
            <h1>固定时间点可供选择</h1>
    <div class="input">
        <input type="text" 
               :placeholder="chooseTime"
               @focus="onFocus"
               @click="handleClick" 
               :class="hoverClass">
    </div>
    <div class="ul" v-show="isShow">
        <scroll :boxSizeing='scrollStyle'
                v-on:scroll="scrollEnd"
                :pos="posSon" 
                :isShow="isShow">
            <ul>
                <li v-for="(cell,index) in allTime" :key="index"> 
                    <list :cell="cell" v-on:handleChange="handleChange">
                    </list>
                </li>
            </ul>
        </scroll>
    </div> 
    </div>
</template>
<script>
import scroll from '@/components/base/scroll/scroll'
import list from './li'
export default {
    data:function(){
        return {
            allTime:null,
            hoverClass:[],
            scrollStyle:{
                width:205,
                height:200
            },
            isShow:false,
            chooseTime:'请选择时间',
            pos:null,
            posSon:null,
            isFirst:true,
        }   
    },
    props:{
        pickerOptions:{
            type:Object,
            default:function(){
                return {
                    start:'00:45',
                    step:15,
                    end:'07:45'
                }
            }
        }
    },
    mounted:function(){
        this._initTime()
    },
    methods:{
        _initTime:function(){
            const sH=this.pickerOptions.start.slice(0,2)
            const sM=this.pickerOptions.start.slice(3,5)
            const eH=this.pickerOptions.end.slice(0,2)
            const eM=this.pickerOptions.end.slice(3,5)

            let sTime=this.dayjs().set('hour',sH).set('minute',sM)
            let eTime=this.dayjs().set('hour',eH).set('minute',eM)
            const step=Number(this.pickerOptions.step)*60*1000
            let diffTime=Math.ceil(Math.abs(sTime.diff(eTime))/step)+1
            let allTime=[]
            for(let x=0;x<diffTime;x++){
                let newTime=sTime.add(this.pickerOptions.step*x,'minute').format('HH:mm--A')
                allTime.push(newTime)
            }
            if(allTime.length!==diffTime){
                allTime.push(eTime.format('HH:mm--A'))
            }
            this.allTime=allTime
        },
        onFocus:function(){
            if(this.hoverClass.length==0){
                 this.hoverClass.push('hoverClass')
            } 
            this.isShow=true 
        },
        handleChange:function(e){
            this.$emit('handleChange',e.substring(0,5))
            console.log('现在已选好')
            console.log(e)
            this.isShow=!this.isShow
            this.isFirst=false
            this.chooseTime=e

             
        },
        handleClick:function(){
            this.isShow=true;
            if(!this.isFirst){
                this.posSon=this.pos
            }
        },
        scrollEnd:function(e){
            this.pos=e
        }
    },
    components:{
        scroll,
        list
    }
}
</script>
<style scoped>
.input input{
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 200px;
    font-size:12px;
}
.hoverClass{
    border-color:#409eff !important;
    outline: none;
}
.time{
    width: 205px;
} 
.ul li{
    width: 100%;
    font-size: 14px;
    color: #606266;
    background: #fff;
    line-height: 30px;
    margin: 5px 0;
    letter-spacing: 2px;
}
.ul li:hover{
    background: #eee;
    color:#000;
}
ul{
    width:203px;
    color: #606266;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background: #fff;
    border-radius: 4px;
    line-height: 30px;
    margin: 5px 0;
}
</style>