60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<template>
|
|
<view class="w-form-timePicker" v-if="!readonly" hover-class="w-click-hover">
|
|
<time-range-picker class="w-form-input" ref="timePickers" startDefaultTime="00:00" endDefaultTime="23:59"
|
|
@timeRange="timeRange"></time-range-picker>
|
|
<click-input style="width: 100%;" split=" ~ " :value="_value" :disabled="readonly" @click="showTimePicker"
|
|
placeholder="请选择时间范围" pre-icon="calendar"></click-input>
|
|
</view>
|
|
<text class="w-form-input-rv" v-else-if="_value.length > 0">{{_value[0]}} ~ {{_value[1]}}</text>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import TimeRangePicker from '@/components/common/TimeRangePicker.vue'
|
|
import ClickInput from '@/components/ClickInput.vue'
|
|
|
|
const props = defineProps({
|
|
formProps: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
modelValue: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
readonly: Boolean
|
|
})
|
|
|
|
const _value = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(val) {
|
|
emits('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['update:modelValue'])
|
|
|
|
const timePickers = ref()
|
|
|
|
function showTimePicker() {
|
|
if (!props.readonly) {
|
|
timePickers.value.open()
|
|
}
|
|
}
|
|
|
|
function timeRange(e) {
|
|
_value.value = e
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.w-form-timePicker {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style> |