144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
|
<view class="_tp" :class="{_left:left,_disabled:disabled}">
|
|
<input type="hidden" :name="name" :value="innervalue" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_name'" :value="hour+':'+minute+(bsec?':' + sec:'')" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_hour'" :value="hour" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_min'" :value="minute" style="display:none;" />
|
|
<input v-if="hasmore && bsec" type="hidden" :name="name+'_sec'" :value="sec" style="display:none;" />
|
|
<ciy-select v-model="hour" :disabled="disabled" :diastema="diastema" noarrow :rows="6" itemalign="center" :minselectsearch="100" :range="hours" :ciystyle="{width:'2em',textAlign:'center'}" @change="chg"></ciy-select>
|
|
:
|
|
<ciy-select v-model="minute" :disabled="disabled" :diastema="diastema" noarrow :rows="5" itemalign="center" :minselectsearch="100" :range="minutes" :ciystyle="{width:'2em',textAlign:'center'}" @change="chg"></ciy-select>
|
|
<template v-if="bsec">
|
|
:
|
|
<ciy-select v-model="sec" :disabled="disabled" :diastema="diastema" noarrow :rows="5" itemalign="center" :minselectsearch="100" :range="minutes" :ciystyle="{width:'2em',textAlign:'center'}" @change="chg"></ciy-select>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: [String, Number]
|
|
},
|
|
value: {
|
|
type: [String, Number]
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasmore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bsec: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
diastema: { //上下间隙
|
|
type: Number,
|
|
default: 16
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
innervalue: this.modelValue !== undefined ? this.modelValue : this.value,
|
|
hours: [],
|
|
minutes: [],
|
|
hour: 0,
|
|
minute: 0,
|
|
sec: 0
|
|
};
|
|
},
|
|
watch: {
|
|
modelValue(newD) {
|
|
if (newD !== undefined) {
|
|
this.innervalue = newD;
|
|
}
|
|
},
|
|
value(newD) {
|
|
if (this.modelValue === undefined) {
|
|
this.innervalue = newD;
|
|
}
|
|
},
|
|
innervalue: {
|
|
handler(newD, oldD) {
|
|
var time = this.toint(newD);
|
|
if (time <= 0 || time > 86400)
|
|
return;
|
|
time--;
|
|
this.hour = this.toint(time / 3600);
|
|
this.minute = this.toint((time - this.hour * 3600) / 60);
|
|
this.sec = time - this.hour * 3600 - this.minute * 60;
|
|
},
|
|
immediate: true
|
|
},
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
for (var i = 0; i < 24; i++)
|
|
this.hours.push({
|
|
id: i,
|
|
name: this.topad0(i, 2)
|
|
});
|
|
for (var i = 0; i < 60; i++)
|
|
this.minutes.push({
|
|
id: i,
|
|
name: this.topad0(i, 2)
|
|
});
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.innervalue
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
updatevalue() {
|
|
this.innervalue = this.hour * 3600 + this.minute * 60 + 1;
|
|
if (this.bsec)
|
|
this.innervalue += this.sec;
|
|
},
|
|
chg(e) {
|
|
if (this.disabled)
|
|
return;
|
|
this.updatevalue();
|
|
this.$emit('update:modelValue', this.innervalue);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'click',
|
|
value: this.innervalue
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
._tp {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
._tp._left {
|
|
justify-content: start;
|
|
}
|
|
|
|
._tp._disabled {
|
|
color: var(--bg7);
|
|
}
|
|
</style> |