背景

####组件PopupTime.vue

把vant官网的popup+时间选择器抽成组件：

popup1show: true 即弹窗显示

<template>
 <div class="PopupTime">
  <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOverlay">
   <van-datetime-picker show-toolbar
         :title="popupTitle.popupName"
         v-model="currentDate"
         type="datetime"
         @cancel="onCancel" @confirm="onConfirm" class="font14"/>
  </van-popup>
 </div>
</template>

<script type="text/ecmascript-6">

 export default {
  props:{
   popupTitle:Object,
  },


  data() {
   return {
    popup1show: true,
    currentDate: new Date(),
   };
  },
 methods：{
 clickOverlay() {
 this.onCancel();
 },
 onCancel() {},
 onConfirm(value, index) {},
 }
 </script>

test.vue调用该组件

 <popup-time 
 v-show="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime组件，并在components中注册

看似没什么问题，但出现isShowDelay为rue时，弹窗显示没有蒙层，第二次点击就点不开了。

问题解决

以为是vant的问题，找了半天结果是v-show的问题，改成v-if就没问题了。

 <popup-time 
 v-if="isShowDelay" 
 :popupTitle="popupDelayT"
 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime组件，并在components中注册

奇奇怪怪的问题，去官网上瞅一眼：

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做――直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多――不管初始条件是什么，元素总是会被渲染，并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

嗯。。。。还是不懂这个问题是怎么出现的？？

补充知识：vant--------Picker与Popup 选择器和遮罩的完美结合

初学前端的小伙伴肯定遇到过这样的问题吧，想写一个下拉，又想写一个遮罩。两个合起来用，然后写一个遮罩height:100%,width:100%,z-index:999,等等去定

繁琐又麻烦 体验感还不一定加

将vant 的picker 与popup集合 方便快捷实用

1.在main.js 里引入

import { Popup } from 'vant';
Vue.use(Popup);
import { Picker } from 'vant'; 
Vue.use(Picker);

2.

<van-popup v-model="show" position="bottom" :overlay="true">
 <van-picker show-toolbar title="请选择区域代理城市" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
</van-popup>

position:你可以自己定义 top or bottom or center 当然一般是bottom

:overlay:false or true看个人需求

title:根据你自己需求定义

js:

效果图：

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Bootstrap5的断点怎么理解，容器是用来做什么的

  本文将结合实例代码，介绍Bootstrap5的断点与容器的具体使用，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧

• 使用原生JS怎样做表格循环滚动的效果？

  今天给大家分享使用原生JS做表格循环滚动的效果，下文的表格循环滚动思路来做轮播图，对轮播图也感兴趣的朋友，不妨了解看看本文的示例，接下来我们一起看看吧。

• 基于Vue框架怎么做token过期自动跳转登录页

  本文主要介绍了vue实现token过期自动跳转到登录页面，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Node.js中express框架的应用有哪些

  1.中间件①挂载中间件的函数：app.usevarhttp=require('http');varexpress=require('express');varapp=express();使用自定义中间件app.use('/',function(req,res,next){    console

• JS中常见的几种删除对象的某个属性方法是什么

  使用js删除javascript对象的某个属性的方法有3种，我们使用的了js的delete函数，下面是我对js删除对象属性的方法总结，是本人在项目中经过测试的。 js代码 script//定义一个对象varmyObject={username:zhangsan,password:123456,address:hubei};//方式一//de