165 lines
No EOL
5.5 KiB
Vue
165 lines
No EOL
5.5 KiB
Vue
<template>
|
|
<div :class="classes">
|
|
<div :class="[prefixCls+ '-list']" v-el:hours>
|
|
<ul @click="handleClickHours">
|
|
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>
|
|
</ul>
|
|
</div>
|
|
<div :class="[prefixCls+ '-list']" v-el:minutes>
|
|
<ul @click="handleClickMinutes">
|
|
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>
|
|
</ul>
|
|
</div>
|
|
<div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
|
|
<ul @click="handleClickSeconds">
|
|
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Options from '../time-mixins';
|
|
import { deepCopy, scrollTop } from '../../../utils/assist';
|
|
|
|
const prefixCls = 'ivu-time-picker-cells';
|
|
|
|
export default {
|
|
mixins: [Options],
|
|
props: {
|
|
hours: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
minutes: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
seconds: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
showSeconds: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
prefixCls: prefixCls
|
|
};
|
|
},
|
|
computed: {
|
|
classes () {
|
|
return [
|
|
`${prefixCls}`,
|
|
{
|
|
[`${prefixCls}-with-seconds`]: this.showSeconds
|
|
}
|
|
];
|
|
},
|
|
hoursList () {
|
|
let hours = [];
|
|
const hour_tmpl = {
|
|
text: 0,
|
|
selected: false,
|
|
disabled: false,
|
|
hide: false
|
|
};
|
|
|
|
for (let i = 0; i < 24; i++) {
|
|
const hour = deepCopy(hour_tmpl);
|
|
hour.text = i;
|
|
|
|
if (this.disabledHours && this.disabledHours.indexOf(i) > -1) {
|
|
hour.disabled = true;
|
|
if (this.hideDisabledOptions) hour.hide = true;
|
|
}
|
|
if (this.hours === i) hour.selected = true;
|
|
hours.push(hour);
|
|
}
|
|
|
|
return hours;
|
|
},
|
|
minutesList () {
|
|
let minutes = [];
|
|
const minute_tmpl = {
|
|
text: 0,
|
|
selected: false,
|
|
disabled: false,
|
|
hide: false
|
|
};
|
|
|
|
for (let i = 0; i < 60; i++) {
|
|
const minute = deepCopy(minute_tmpl);
|
|
minute.text = i;
|
|
|
|
if (this.disabledMinutes && this.disabledMinutes.indexOf(i) > -1) {
|
|
minute.disabled = true;
|
|
if (this.hideDisabledOptions) minute.hide = true;
|
|
}
|
|
if (this.minutes === i) minute.selected = true;
|
|
minutes.push(minute);
|
|
}
|
|
|
|
return minutes;
|
|
},
|
|
secondsList () {
|
|
let seconds = [];
|
|
const second_tmpl = {
|
|
text: 0,
|
|
selected: false,
|
|
disabled: false,
|
|
hide: false
|
|
};
|
|
|
|
for (let i = 0; i < 60; i++) {
|
|
const second = deepCopy(second_tmpl);
|
|
second.text = i;
|
|
|
|
if (this.disabledSeconds && this.disabledSeconds.indexOf(i) > -1) {
|
|
second.disabled = true;
|
|
if (this.hideDisabledOptions) second.hide = true;
|
|
}
|
|
if (this.seconds === i) second.selected = true;
|
|
seconds.push(second);
|
|
}
|
|
|
|
return seconds;
|
|
}
|
|
},
|
|
methods: {
|
|
getCellCls (cell) {
|
|
return [
|
|
`${prefixCls}-cell`,
|
|
{
|
|
[`${prefixCls}-cell-selected`]: cell.selected,
|
|
[`${prefixCls}-cell-disabled`]: cell.disabled
|
|
}
|
|
];
|
|
},
|
|
handleClickHours (event) {
|
|
this.handleClick('hours', event);
|
|
},
|
|
handleClickMinutes (event) {
|
|
this.handleClick('minutes', event);
|
|
},
|
|
handleClickSeconds (event) {
|
|
this.handleClick('seconds', event);
|
|
},
|
|
handleClick (type, event) {
|
|
const target = event.target;
|
|
if (target.tagName === 'LI') {
|
|
const cell = this[`${type}List`][parseInt(event.target.getAttribute('index'))];
|
|
if (cell.disabled) return;
|
|
const data = {};
|
|
data[type] = cell.text;
|
|
this.$emit('on-change', data);
|
|
|
|
const from = this.$els[type].scrollTop;
|
|
const to = 24 * cell.text;
|
|
scrollTop(this.$els[type], from, to, 500);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script> |