快捷導(dǎo)航

在vant中使用時(shí)間選擇器和popup彈出層的操作

更新時(shí)間：2020年11月04日 11:23:04 作者：曉未蘇

這篇文章主要介紹了在vant中使用時(shí)間選擇器和popup彈出層的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

<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="時(shí)間選擇"
    type="date"
   />
  </van-popup>
 </div>
<template>
<script>
  import { Cell, CellGroup, DatetimePicker, Popup } from "vant";
  import Vue from "vue";
  export default {
   //組件 Q2組件需要正確注冊(cè)，才能被頁(yè)面識(shí)別
   components: {
     [Cell.name]: Cell,
     [CellGroup.name]: CellGroup,
     [DatetimePicker.name]: DatetimePicker,
     [Popup.name]: Popup
   },
 //數(shù)據(jù)層
 data() {
  return {
   datetime: "",
   currentDate: "",  //初始化當(dāng)前時(shí)間
   showDatePicker: false, //判斷popup彈出層是否顯示，false不顯示
  }；
 },
 created() {
  this.currentDate = new Date();  //給當(dāng)前時(shí)間賦值
  this.datetime = this.common.dateToString(this.currentDate);  //給單元格顯示當(dāng)前時(shí)間的變量賦值
 },
 mounted() {},
 methods: {
  onchangDate1() {
   //currentDate值就是選擇的時(shí)間，把改變后的值賦值給單元格變量顯示
   this.datetime = this.common.dateToString(this.currentDate);  
  }
 }
};
</script>

補(bǔ)充知識(shí)：vant的popup、Datetimepicker控件滾動(dòng)穿透

今天一邊改bug一邊測(cè)試發(fā)現(xiàn)，vant的popup跟DatetimePicker會(huì)出現(xiàn)滾動(dòng)穿透。

解決辦法：使用preventDefault阻止body的touchmove事件。

方法1

方法2

在全局注冊(cè)v-roll指令，結(jié)合timeDatePicker使用（如第二圖）。bodyVisible初始狀態(tài)為false，在彈層打開時(shí)改變，彈層點(diǎn)擊確認(rèn)跟取消時(shí)也需要改變！

解決辦法源于另一個(gè)作者的，附上對(duì)方的文章鏈接（他用的是Mint-ui，但是框架這種東西，大同小異吧，東西都差不多，遇到的問(wèn)題，很多解決辦法都可以相通）

以上這篇在vant中使用時(shí)間選擇器和popup彈出層的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue打包路徑配置過(guò)程
這篇文章主要介紹了Vue打包路徑配置過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法
本文主要介紹了vue3.0 vue-router4.0打包后頁(yè)面空白的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue項(xiàng)目中設(shè)置背景圖片方法
下面小編就為大家分享一篇Vue項(xiàng)目中設(shè)置背景圖片方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式
這篇文章主要介紹了Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue使用keep-alive后從部分頁(yè)面進(jìn)入不緩存示例詳解
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后從部分頁(yè)面進(jìn)入不緩存的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-03-03
vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例
這篇文章主要給大家介紹了關(guān)于vue cli3.0結(jié)合echarts3.0與地圖的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色的示例代碼
這篇文章主要介紹了用vue簡(jiǎn)單的實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
vue-treeselect及el-tree點(diǎn)擊節(jié)點(diǎn)獲取上級(jí)節(jié)點(diǎn)的數(shù)據(jù)方式
這篇文章主要介紹了vue-treeselect及el-tree點(diǎn)擊節(jié)點(diǎn)獲取上級(jí)節(jié)點(diǎn)的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
詳解.vue文件中監(jiān)聽input輸入事件（oninput）
本篇文章主要介紹了詳解.vue文件中監(jiān)聽input輸入事件（oninput），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09