在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

方法2

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

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

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

赞 (0)

相关推荐

  • vant picker+popup 自定义三级联动案例

    picker选择器的数据由columns属性控制,columns中有几个元素就代表该选择器有多少级,通过change方法来给对应列赋值. columns = [{ values: column1, // 对应列的值 defaultIndex: 0, // 默认选中项索引 className: 'class1' // 对应列的类名 }, { values: [], defaultIndex: 0, className: 'class2' }, { values: [], defaultIndex:

  • vant 时间选择器--开始时间和结束时间实例

    我就废话不多说了,大家还是直接看代码吧~ <template> <div class="linesMigrate"> <div class="conditionDiv"> <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart"> <div

  • 解决VantUI popup 弹窗不弹出或无蒙层的问题

    背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件: popup1show: true 即弹窗显示 <template> <div class="PopupTime"> <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOv

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

    我就废话不多说了,大家还是直接看代码吧~ <template> <div class="page"> <van-cell-group> <van-cell title="选择日期" :value="datetime" arrow @click="showDatePicker = !showDatePicker" ></van-cell> </van-cell-g

  • jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • jquery三个关闭弹出层的小示例

    在开发应用中我们做了一个弹出层,有时我们会做一个关闭按钮,这样点击关闭就可以把弹出层关闭了,但是有时希望只要不点击弹出层内就自动关闭弹出层了,下面我总结了三个实例.例1 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml

  • layer 关闭指定弹出层的例子

    首先,弹出某个层时需要给层取名(赋值),如: var mylay = layer.open({ type: 2, content: 'layer.html', title: false, area: ['500px', '500px'] }); 需要关闭指定的弹出层时,直接: layer.close(mylay) 如果在弹出层中写js,将弹出层自身关闭,可以先获取到弹出层名字,再将其关闭 var mylay = parent.layer.getFrameIndex(window.name); p

  • Layer组件多个iframe弹出层打开与关闭及参数传递的方法

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http://layer.layui.com/ 二.多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380p

  • jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • Popup弹出框添加数据实现方法

    Popup弹出框添加数据实现方法

    本文实例为大家分享了Popup弹出框添加数据的具体代码,供大家参考,具体内容如下 逻辑 窗口P1中显示一组数据,并提供一个添加按钮 点击按钮,弹出新的浏览器窗口P2,在其中添加一条数据并提交后,窗口P2自动关闭 新添加数据动态添加到窗口P1中并被选中 所需知识:JS BOM 窗口对象:JS自执行函数 实现 下面在Django中简单实现下,因为比较简单,路由和视图就写在一起了. 1.路由和视图部分 from django.conf.urls import url from django.short

  • C# wpf解决Popup弹出位置异常问题解决

    C# wpf解决Popup弹出位置异常问题解决

    目录 问题描述 原因分析 解决方法 问题描述 使用Popup控件作为弹出框,使用相对位置弹出即Placement="Relative",在不同的设备中弹出的位置不一致.比如下面的例子. 使用如下代码: <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http

  • JS中frameset框架弹出层实例代码

    JS中frameset框架弹出层实例代码

    前段时间做项目,有个功能是消息提醒. 我相信很多大牛都做过.下面来分享我遇到的问题和解决方案. 首先我们的项目是用frameset框架,main代码. <frameset name="myFrame" cols="85,*" frameborder="no" border="0" framespacing="0"> <frame src="${base}/left.jsp&quo

  • 解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    废话不多说了直接给大家贴代码了,具体代码如下所示: $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); //显示modal $('#myModal').modal('show'); //show完毕前执行 $('#myModal').on('shown', function () { //加上下面这句!解决了~ $(document).off('focusin.modal'); // 打开Dia

随机推荐