Vue使用vant实现日期选择器功能
作者：小蹦跶儿
在当今前端开发的领域中,Vue 框架因其高效和灵活的特性备受开发者青睐,而 Vant 是一个轻量的移动端组件库,为 Vue 应用的开发提供了丰富且便捷的功能组件,本文将就如何在 Vue 框架中通过 Vant 来实现日期选择器的使用,需要的朋友可以参考下
前言
在当今前端开发的领域中，Vue 框架因其高效和灵活的特性备受开发者青睐。而 Vant 是一个轻量的移动端组件库，为 Vue 应用的开发提供了丰富且便捷的功能组件。在众多的组件应用中，日期选择器又是一个常见且重要的需求。
本文将就如何在 Vue 框架中通过 Vant 来实现日期选择器的使用。
一、实现的效果
二、实现方案
可参考vant官网。
注：使用前要注意项目是 Vue2 还是 Vue3 ，所用到的Vant版本是不一样的！
由于我的项目是Vue2的，所以本文用的Vant版本是Vant2。
- 在现有项目中使用
Vant时，可以通过npm或yarn进行安装：
// Vue 3 项目，安装最新版 Vant： npm i vant -S // Vue 2 项目，安装 Vant 2： npm i vant@latest-v2 -S
- 我这边的项目比较小，暂时用到几个组件，所以用了按需引入的方式：
- 首先在
src文件下新建plugins文件，里面新建vant.js，如下图：
import Vue from 'vue'
import {List, Uploader, Toast, Popup, DatetimePicker} from 'vant'
const uses = [List, Uploader, Toast, Popup, DatetimePicker]
uses.forEach(use => {
Vue.use(use)
})
- 然后在
main.js中引入此文件，如下图：
完成这两步操作之后，后续在页面里就能够正常加以使用了。
- 在使用日期选择器的时候，结合了弹出层一起使用：
用弹出层将日期选择器包起来。
弹出层设置了 底部弹出、圆角弹窗、40%的高度，这些属性都可以根据自己项目实际情况进行调整.
<van-popup v-model="show" position="bottom" round :style="{ height: '40%' }">
<van-datetime-picker
v-model="currentDate"
type="date"
title="请选择日期"
:formatter="formatter"
@change="change"
@confirm="confirm"
@cancel="cancel"
safe-area-inset-bottom
/>
</van-popup>
DatetimePicker通过type属性来定义需要选择的时间类型，type为date表示选择年月日。在默认的日期选择器中，数字的后面是不带“年月日”这几个字的：
如果想要实现效果图中带“年月日”字样的，则需要加上formatter属性即可：
formatter(type, val) {
if (type === 'year') {
return val + '年';
}
if (type === 'month') {
return val + '月';
}
if (type === 'day') {
return val + '日';
}
return val;
},
- 如果想要日期选择器弹出来的时候，默认是当天的日期：
// 在data中设置即可 currentDate: new Date(),
另外可以通过
min-date和max-date属性可以确定可选的时间范围，不过我这边没有用到此属性，用的时候可参考文档进行设置即可。日期选择器总共三个事件，需要哪个直接用即可：
change(val) {
console.log(val, 'val')
},
confirm() {
this.dateValue = this.timeFormat(this.currentDate);
console.log(this.dateValue, 'dateValue')
this.cancel();
},
cancel() {
this.show = false;
},
- 如果想在点击日期选择器的“完成”按钮时，让时间显示成
**** 年 * 月 * 日的格式，需要单独写一个格式化时间的方法，在confirm事件中调用即可：
timeFormat(time) { // 时间格式化 ****年*月*日
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
return year + '年' + month + '月' + day + '日';
},
这样选择完时间后，显示出来的就是下图这种：
大功告成！
三、总结
Vant 的使用方法极为简便，所需代码量极少，其文档中的 API 也十分详尽，特别适合在 Vue 项目的移动端加以运用。
以上就是Vue使用vant实现日期选择器功能的详细内容，更多关于Vue vant日期选择器的资料请关注脚本之家其它相关文章！