Vue使用vant实现日期选择器功能
更新时间：2024年08月09日 09:00:09 作者：小蹦跶儿
在当今前端开发的领域中,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日期选择器的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue之input输入框防抖debounce函数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vue自定义过滤器格式化数字三位加一逗号的实现代码,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vant-image本地图片无法显示的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue.js diff算法原理详细解析，diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom2022-06-06
这篇文章主要介绍了vue项目中axios请求网络接口封装的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
今天小编就为大家分享一篇vue 更改连接后台的api示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了Vue组件化学习之scoped，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了页面内锚点定位及跳转方法总结，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
vee-validator是一种基于vue模板的轻量级校验框架。本文主要讨论的是vee-validator校验方案，感兴趣的朋友跟随小编一起看看吧2019-11-11
最新评论