van-field 使用slot实现生日选择
时间: 2025-01-10 16:11:07 浏览: 50
### 使用 `van-field` 和 Slot 实现生日选择功能
为了实现一个带有日期选择器的输入框,可以利用 Vant 的 `van-field` 组件以及其插槽特性来嵌入 `van-datetime-picker` 或者 `van-popup` 中的日期选择器。下面是一个具体的例子说明如何创建这样的组件。
#### HTML 结构与 Vue 模板
通过组合使用 `van-field` 及 `van-popup` 来构建交互界面,并借助于 JavaScript 控制显示/隐藏 Popup 对话框的状态:
```html
<template>
<div class="birthday-selector">
<!-- 输入框 -->
<van-field v-model="currentDate" readonly clickable label="出生年月日"
placeholder="点击选择时间" @click="showPopup = true"/>
<!-- 时间选择弹窗 -->
<van-popup v-model:show="showPopup" position="bottom">
<van-datetime-picker type="date" title="选择年月日" :min-date="minDate"
:max-date="maxDate" @confirm="onConfirm" @cancel="showPopup=false"/>
</van-popup>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 定义变量存储当前选中的日期,默认为空字符串表示未选择任何值
const currentDate = ref('');
let showPopup = ref(false);
// 设置可选最小最大范围
const minDate = new Date(1900, 0, 1);
const maxDate = new Date();
function onConfirm(date) {
// 更新字段值并关闭popup
currentDate.value = formatDate(date);
showPopup.value = false;
}
// 辅助函数:格式化日期对象为 YYYY-MM-DD 字符串形式
function formatDate(date){
const y = date.getFullYear();
let m = (date.getMonth() + 1).toString().padStart(2,'0');
let d = date.getDate().toString().padStart(2,'0');
return `${y}-${m}-${d}`;
}
</script>
```
此代码片段展示了怎样将 `van-field` 配置成只读模式并通过点击事件触发底部弹出的时间选择面板。当用户选择了具体日期之后,会调用 `onConfirm()` 方法更新绑定至 `v-model` 上的数据属性 `currentDate` 并关闭弹层[^1]。
阅读全文
相关推荐

















