xl-mobile/src/components/XDateTime.vue

<script setup>
import timeIcon from "../static/icons/time.png";
import {ref} from "vue";

const modalValue = defineModel();
const DateTimeRef = ref();
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;
}
</script>

<template>
    <view :class="[!$slots.default ? 'x-date-input' : '']">
        <view v-if="!$slots.default" class="!flex items-center justify-center gap-[20rpx]" @click="open">
            <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 {
    background-color: #F2F3F5;
    padding: 14rpx 0;
    flex-grow: 1;
    text-align: center;
    border-radius: 4rpx;
    position: relative;
}
</style>