Vue 用Vant实现时间选择器的示例代码


Posted in Javascript onOctober 25, 2019

1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker

引入Vant中DatetimePicker组件(全局引入后可直接使用)

import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);

关键使用代码(结合vant组件Popup的底部弹出层一起使用)

<van-popup v-model="dateShow" position="bottom">
   <van-datetime-picker v-model="currentDate" type="year-month" @cancel="handleCancel"
    @confirm="handleEndDateConfirm" />
  </van-popup>

export default {
 data() {
  return {
   dateShow: false,
   currentDate: new Date()
  };
 }
}

效果图

Vue 用Vant实现时间选择器的示例代码

实现点击确定 和取消的方法

handleCancel () {
   this.dateShow = false;
  },
  //开始时间
  handleEndDateConfirm () {
   this.dateShow = false;
   this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
vue登录以及权限验证相关的实现
Oct 25 #Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 #Javascript
JS实现简单tab选项卡切换
Oct 25 #Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 #Javascript
JS实现骰子3D旋转效果
Oct 24 #Javascript
Vue可自定义tab组件用法实例
Oct 24 #Javascript
js实现转动骰子模型
Oct 24 #Javascript
You might like
php生成随机数或者字符串的代码
2008/09/05 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
浅析js封装和作用域
2013/07/09 Javascript
js选项卡的实现方法
2015/02/09 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python实现翻转数组功能示例
2018/01/12 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
python中wx模块的具体使用方法
2020/05/15 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
安全环保标语
2014/06/09 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
React中的Context应用场景分析
2021/06/11 Javascript