###
Vant UI
Calendar 组件使用方法
在
Vue 项目中集成并使用
Vant 的 `
Calendar` 组件可以方便地实现日期选择功能。为了更好地理解如何
封装此组件，以下是详细的说明。
#### 安装依赖
首先，在项目根目录下通过 npm 或 yarn 安装
Vant：
```bash
npm install
vant --save
```
或者
```bash
yarn add
vant
```
接着引入所需样式文件以及组件本身[^1]。
#### 基础配置与导入
创建一个新的
Vue 文件来定义自定义的
日历组件，比如命名为 `Custom
Calendar.vue`:
```
javascript
// Custom
Calendar.vue
<template>
<van
-calendar v
-model="show" @confirm="onConfirm"/>
</template>
<script>
import {
Calendar } from '
vant';
export default {
components: {
Van
Calendar:
Calendar,
},
data
() {
return {
show: false, // 控制弹窗显示状态
};
},
methods: {
onConfirm
(date
) {
this
.show = false;
console
.log
('Selected date:', date
);
}
}
};
</script>
<style lang="less">
@import '~
vant/lib/index
.css'; /* 引入
Vant 样式 */
</style>
```
上述代码展示了最简单的
日历组件初始化方式，并设置了确认事件处理器以便获取选定的日期。
#### 进一步优化
- 封装成可重用模块
为了让这个组件更加灵活易用，可以通过 props 和 events 来增强其交互能力。修改后的版本如下所示：
```html
<!
-- Custom
Calendar.vue -->
<template>
<div class="custom
-calendar-wrapper">
<button type="button" @click="toggleShow">{{ buttonText }}</button>
<!
-- 日历控件
-->
<transition name="fade">
<van
-calendar
v
-if="visible"
:min
-date="minDate"
:max
-date="maxDate"
color="#ff4d4f"
@select="handleSelect"
@close="hide
Calendar"
/>
</transition>
</div>
</template>
<script>
import day
js from 'day
js';
const today = new Date
();
const oneYearAgo = new Date
(today
.getFullYear
()-1,today
.getMonth
(),today
.getDate
());
export default {
props: ['value'],
computed:{
visible
(){
return this
.value || false;
},
minDate
(){return oneYearAgo},
maxDate
(){return today}
},
watch: {
value
(newValue
){
newValue ? this
.$emit
('input', true
):this
.hide
Calendar()
}
},
mounted
(){
document
.addEventListener
('click',
(event
)=>{
const el=event
.target
.closest
('
.custom
-calendar-wrapper'
);
!el && this
.visible&&this
.hide
Calendar();
}
);
},
beforeDestroy
(){
document
.removeEventListener
('click'
)
},
methods: {
toggleShow
() {
this
.$emit
('input',!this
.visible
);
},
handleSelect
(selectedDates
) {
let selectedDay=selectedDates[0];
this
.$emit
('change', selectedDay
.format
('YYYY
-MM
-DD'
));
this
.toggleShow
();
},
hide
Calendar(){
this
.$emit
('input',false
)
}
}
};
</script>
<style scoped>
.custom
-calendar-wrapper button{
padding:
.5em
.8em ;
border:none;
background
-color:#fff;
cursor:pointer;
}
.fade
-enter
-active,
.fade
-leave
-active{ transition: opacity
.3s;}
.fade
-enter,
.fade
-leave
-to{/*
.fade
-leave
-active below version 2
.1
.8 */opacity: 0;}
.van
-overlay{z
-index:999!important;}/* 提升遮罩层优先级 */
@media
(min
-width:768px
){
.van
-popup
--bottom{width:40%;}}
</style>
```
这段改进过的代码实现了更丰富的用户体验，包括但不限于按钮触发器、范围限定、颜色主题定制等功能特性。
#### 实际应用案例
假设在一个表单页面中有这样一个需求——允许用户点击输入框打开日历选择具体某一天作为结束时间，则可以在父组件里这样调用刚刚
封装好的 `Custom
Calendar` :
```html
<form action="#">
...
<label>End Time:</label>
<input readonly placeholder="Please select end time
..." :value="endTimeStr">
<!
-- 自定义
日历组件 -->
<custom
-calendar
v
-model="isDatePickerVisible"
@change="
(dateString
)=>updateEndTime
(dateString
)"
></custom
-calendar>
...
</form>
```
其中 `endTimeStr`, `isDatePickerVisible` 是由父组件管理的状态变量；而 `updateEndTime
()` 方法则负责处理来自子组件的选择结果更新逻辑。
本文详细描述了如何在Vue项目中对vant的日期选择器组件进行二次封装，包括日期区间选择、自定义底部按钮、清除时间功能、默认选中日期范围设定、组件宽度控制以及接口交互等特性。
最低0.47元/天 解锁文章
扫一扫
4003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
