在vant中使用时间选择器和popup弹出层的操作


Posted in Javascript onNovember 04, 2020

我就废话不多说了,大家还是直接看代码吧~

在vant中使用时间选择器和popup弹出层的操作

<template> 
 <div class="page">
  <van-cell-group>
      <van-cell
       title="选择日期"
       :value="datetime"
       arrow
       @click="showDatePicker = !showDatePicker"
      ></van-cell>
 </van-cell-group>
 <van-popup v-model="showDatePicker" position="bottom" :style="{ height: '40%' }">
   <van-datetime-picker
    v-model="currentDate"
    @confirm="
     showDatePicker = false;
     onchangDate1();
    "
    @cancel="showDatePicker = false"
    title="时间选择"
    type="date"
   />
  </van-popup>
 </div>
<template>
<script>
  import { Cell, CellGroup, DatetimePicker, Popup } from "vant";
  import Vue from "vue";
  export default {
   //组件 Q2组件需要正确注册,才能被页面识别
   components: {
     [Cell.name]: Cell,
     [CellGroup.name]: CellGroup,
     [DatetimePicker.name]: DatetimePicker,
     [Popup.name]: Popup
   },
 //数据层
 data() {
  return {
   datetime: "",
   currentDate: "",  //初始化当前时间
   showDatePicker: false, //判断popup弹出层是否显示,false不显示
  };
 },
 created() {
  this.currentDate = new Date();  //给当前时间赋值
  this.datetime = this.common.dateToString(this.currentDate);  //给单元格显示当前时间的变量赋值
 },
 mounted() {},
 methods: {
  onchangDate1() {
   //currentDate值就是选择的时间,把改变后的值赋值给单元格变量显示
   this.datetime = this.common.dateToString(this.currentDate);  
  }
 }
};
</script>

补充知识:vant的popup、Datetimepicker控件滚动穿透

今天一边改bug一边测试发现,vant的popup跟DatetimePicker会出现滚动穿透。

解决办法:使用preventDefault阻止body的touchmove事件。

方法1

在vant中使用时间选择器和popup弹出层的操作

在vant中使用时间选择器和popup弹出层的操作

方法2

在全局注册v-roll指令,结合timeDatePicker使用(如第二图)。bodyVisible初始状态为false,在弹层打开时改变,弹层点击确认跟取消时也需要改变!

在vant中使用时间选择器和popup弹出层的操作

在vant中使用时间选择器和popup弹出层的操作

解决办法源于另一个作者的,附上对方的文章链接(他用的是Mint-ui,但是框架这种东西,大同小异吧,东西都差不多,遇到的问题,很多解决办法都可以相通)

以上这篇在vant中使用时间选择器和popup弹出层的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
完善的jquery处理机制
Feb 21 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
详解原生js实现offset方法
Jun 15 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 #Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 #Javascript
Vue绑定用户接口实现代码示例
Nov 04 #Javascript
vant picker+popup 自定义三级联动案例
Nov 04 #Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 #Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 #Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
逐步提升php框架的性能
2008/01/10 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
php post换行的方法
2020/02/03 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python标准库之sqlite3使用实例
2014/11/25 Python
python实现八大排序算法(1)
2017/09/14 Python
Django web框架使用url path name详解
2019/04/29 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
内业资料员岗位职责
2014/01/04 职场文书
高中政治教学反思
2014/01/18 职场文书
前台文员职责范本
2014/03/07 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL