解决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:

效果图：

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

赞 (0)

相关推荐

  • vant自定义二级菜单操作

    (1)组件解释: 本组件是为了解决二级联动的效果编写的,这里使用了省份和城市分开的效果,具体展示效果,可以参考下面. (2)组件代码: <template> <div> <button @click="showM">{{ value || "选择省份" }}</button> <button @click="showC">{{ value2 || "选择城市" }}&

  • Vant picker 多级联动操作

    官网地址:链接 官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" /> <van-popup v-model="showPicker" position=&q

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • 在vue中使用vant TreeSelect分类选择组件操作

    中文文档:TreeSelect 分类选择 效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van

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

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

  • Element的Message弹窗重复弹出问题解决

    Element的Message弹窗重复弹出问题解决

    目录 一. 使用 二. 解决消息弹窗重复显示 一. 使用 在 Vue 中使用 element 的 message 组件 在 Vue 文件中使用 this.$message({ message: "提示信息", type: "success" }) 在 js 文件中使用 import ElementUI from 'element-ui'; ElementUI.Message({ message: '提示信息', type: 'warning' }); 二. 解决消息

  • 快速解决进入fragment时不能弹出软件盘的问题

    最近发现在Activity中可以进入Activity界面,设置软件盘的显示和隐藏,但是fragment比较坑爹,所以给出解决方案 ** * 狗屎弹键盘 */ Handler handler = new Handler(new Handler.Callback() { @Override public boolean handleMessage(Message msg) { inputMethodManager.toggleSoftInput(0, InputMethodManager.HIDE_

  • JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!

  • JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

    本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能.分享给大家供大家参考,具体如下: HTML部分: <div id="div">点击除开div的区域可以弹出弹窗</div> <div id="cover"></div> <div id="box">点击除开div和弹窗的区域可以关闭弹窗</div> CSS部分: #div{ /*设置z-index属性必须设置

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • Ajax实现弹出式无刷新城市选择功能代码

    Ajax实现弹出式无刷新城市选择功能代码

    本文实例讲述了Ajax实现弹出式无刷新城市选择功能.分享给大家供大家参考.具体如下: 这是一款很棒的全国城市选择效果,添加城市时先添加组:找到id是"selectSub"中select标签下,添加option标签,value属性递增,找到id是"selectSub",按照原有格式添加div,其id属性递增:然后添加二级副选框选项:复制id是"selectSub"下任意input标签,粘贴在需要添加的位置即可,你想扩展的话,配合动态语言完全可以将城

  • 使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

    使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

    当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

  • jquery使用ColorBox弹出图片组浏览层实例演示

    本示例使用Jquery的ColorBox插件弹出图片组浏览层.效果预览网址:http://www.keleyi.com/keleyi/phtml/colorbox/ 以下是本效果的完整代码,将以下代码保存到html文件,打开即可预览效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

随机推荐