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

 更新时间:2020年11月03日 10:37:16   作者:HYeeee  
这篇文章主要介绍了解决VantUI popup 弹窗不弹出或无蒙层的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

背景

####组件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:

效果图:

以上的列子 都是小生自己实践 ,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue elementUI表单嵌套表格并对每行进行校验详解

    Vue elementUI表单嵌套表格并对每行进行校验详解

    element-ui中有详细的各种表格及表格方法,下面这篇文章主要给大家介绍了关于Vue elementUI表单嵌套表格并对每行进行校验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    这篇文章主要介绍了详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue2中vue-router引入使用详解

    vue2中vue-router引入使用详解

    Vue Router 是 Vue 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,下面就跟随小编一起学习一下vue-router的具体用法吧
    2023-12-12
  • vue环境变量配置之process.env解读

    vue环境变量配置之process.env解读

    这篇文章主要介绍了vue环境变量配置之process.env解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 如何修改vue-treeSelect的高度

    如何修改vue-treeSelect的高度

    这篇文章主要介绍了如何修改vue-treeSelect的高度,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 部属vue项目,访问路径设置非根,显示白屏的解决方案

    部属vue项目,访问路径设置非根,显示白屏的解决方案

    这篇文章主要介绍了部属vue项目,访问路径设置非根,显示白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    这篇文章主要介绍了使用VUE+SpringBoot+EasyExcel 整合导入导出数据的过程详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • vue3实现动态侧边菜单栏的几种方式简单总结

    vue3实现动态侧边菜单栏的几种方式简单总结

    在做开发中都会遇到的需求,每个用户的权限是不一样的,那他可以访问的页面(路由)可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏,这篇文章主要给大家介绍了关于vue3实现动态侧边菜单栏的几种方式,需要的朋友可以参考下
    2024-02-02
  • Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue 中如何将函数作为 props 传递给组件的实现代码

    Vue 中如何将函数作为 props 传递给组件的实现代码

    这篇文章主要介绍了Vue 中如何将函数作为 props 传递给组件的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05

最新评论