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('現(xiàn)在已選好')
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>
