37 lines
881 B
Vue
37 lines
881 B
Vue
|
<script setup>
|
||
|
|
import timeIcon from "../static/icons/time.png";
|
||
|
|
|
||
|
|
const modalValue = defineModel();
|
||
|
|
const {placeholder} = defineProps({
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: "请选择时间",
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const success = ({detail: {value}}) => {
|
||
|
|
modalValue.value = value;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<picker mode="date" class="x-date-input" @change="success">
|
||
|
|
<view>
|
||
|
|
<image class="!size-[24rpx] !absolute left-[30rpx] top-1/2 -translate-y-1/2" :src="timeIcon"></image>
|
||
|
|
<text v-if="!modalValue" class="text-[#666]">{{ placeholder }}</text>
|
||
|
|
<text v-else>{{modalValue}}</text>
|
||
|
|
</view>
|
||
|
|
</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>
|