<template>
|
<view class="oi-form-time-picker">
|
<picker v-if="model" mode="time" :disabled="data.disabled" @change="onChange">
|
<view class="oi-time-picker-x oi-time-picker-border" :class="{'oi-time-picker-disabled': data.disabled}">
|
<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
|
<view class="oi-time-picker-input">{{model[data.fieldId]}}</view>
|
</view>
|
</picker>
|
<picker v-else mode="time" :disabled="data.disabled" @change="onChange">
|
<view class="oi-time-picker-x oi-time-picker-border" :class="{'oi-time-picker-disabled': data.disabled}">
|
<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
|
<view class="oi-time-picker-input">{{data.value}}</view>
|
</view>
|
</picker>
|
</view>
|
</template>
|
<script>
|
export default {
|
name: "OIFormTimePicker",
|
props: {
|
data: {
|
type: Object,
|
required: true,
|
},
|
model: Object,
|
},
|
data() {
|
return {
|
|
}
|
},
|
methods: {
|
onChange(e) {
|
let val = e.detail.value + ":00"
|
if (!this.model) {
|
this.data.value = val
|
} else {
|
this.model[this.data.fieldId] = val
|
}
|
this.$emit("change", val)
|
},
|
},
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.oi-form-time-picker {
|
width: 100%;
|
|
.oi-time-picker-x {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
border-radius: 4px;
|
background-color: #fff;
|
color: #666;
|
font-size: 14px;
|
flex: 1;
|
|
.icon-calendar {
|
padding-left: 3px;
|
}
|
|
.oi-time-picker-input {
|
width: auto;
|
height: 35px;
|
/* #ifndef MP */
|
padding-left: 5px;
|
/* #endif */
|
position: relative;
|
flex: 1;
|
line-height: 35px;
|
font-size: 14px;
|
overflow: hidden;
|
}
|
|
}
|
|
.oi-time-picker-disabled {
|
opacity: 0.4;
|
cursor: default;
|
}
|
|
.oi-time-picker-border {
|
box-sizing: border-box;
|
border-radius: 4px;
|
border: 1px solid #e5e5e5;
|
}
|
}
|
</style>
|
