61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup>
|
|
import timeIcon from "../static/icons/time.png";
|
|
import {ref} from "vue";
|
|
|
|
const modalValue = defineModel();
|
|
const DateTimeRef = ref();
|
|
const emits = defineEmits(['success']);
|
|
const {placeholder, fields, type} = defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: "请选择时间",
|
|
},
|
|
fields: {
|
|
type: String,
|
|
default: 'day'
|
|
},
|
|
type: {
|
|
type: Number,
|
|
default: 2
|
|
}
|
|
});
|
|
|
|
const open = () => {
|
|
DateTimeRef.value.show();
|
|
}
|
|
|
|
const success = ({result}) => {
|
|
modalValue.value = result;
|
|
emits('success');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view :class="[!$slots.default ? 'x-date-input' : '']" @click="open">
|
|
<view v-if="!$slots.default" class="!flex items-center justify-center gap-[20rpx]">
|
|
<image class="!size-[24rpx]" :src="timeIcon"></image>
|
|
<text v-if="!modalValue" class="text-[#666]">{{ placeholder }}</text>
|
|
<text class="test-24r" v-else>{{ modalValue }}</text>
|
|
</view>
|
|
<slot v-else></slot>
|
|
</view>
|
|
|
|
<tui-datetime ref="DateTimeRef" :type="type" @confirm="success"></tui-datetime>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.x-date-input-picker {
|
|
flex-grow: 1;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.x-date-input {
|
|
background-color: #F2F3F5;
|
|
padding: 14rpx 0;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
position: relative;
|
|
}
|
|
</style>
|