在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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
使用js 设置url参数
Jul 08 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 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通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Vue实现web分页组件详解
2017/11/28 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
.NET面试10题
2014/02/24 面试题
应届大学生的推荐信
2013/11/20 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
创业计划书之书店
2019/09/10 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
python缺失值的解决方法总结
2021/06/09 Python
pandas中pd.groupby()的用法详解
2022/06/16 Python