xl-mobile/src/components/XDateTime.vue

<script setup>
import timeIcon from "../static/icons/time.png";

const modalValue = defineModel();
const {placeholder, fields} = defineProps({
    placeholder: {
        type: String,
        default: "请选择时间",
    },
    fields: {
        type: String,
        default: 'day'
    }
});

const success = ({detail: {value}}) => {
    modalValue.value = value;
}
</script>

<template>
    <picker mode="date" :class="[!$slots.default ? 'x-date-input' : '']" @change="success" :fields="fields">
        <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>
    </picker>
</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>