Popup组件的结构:

<template>
  <div>
  <!--分享弹出窗 begin-->
    <mt-popup class="sharePopup" v-model="popupVisible" position="bottom">
      <ul class="shareUl">
        内容
     </ul>
     <div class="shareFooter">
        <div class="shareCancel" @click="hiddenShare()">取消</div>
    </div>
</mt-popup>
  <!--分享弹出窗 end-->
  </div>
</template>

1:通过把显示与隐藏的标志popupVisible存储到vuex中,发现会报no setting。

2:通过把显示与隐藏的标志popupVisible通过Prop的方式传递,发现会报:

解决办法:

步骤1:Popup组件的结构更改为红框的部分:

步骤2: <mt-popup  v-model="popupVisible" position="bottom"><Popup组件></Popup组件></mt-popup>写到父组件。

步骤3:点击取消事通过$emit的方法通知父组件改变显示与隐藏的标志popupVisible的值。

Mint-ui 中 Popup 作为组件引入,控制弹出框的显示与隐藏遇到的问题。的更多相关文章

  1. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  2. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  3. Example005控制弹出窗口居中显示

    <!-- 实例005控制弹出窗口居中显示 --> <head> <meta charset="UTF-8"> </head> < ...

  4. element-ul 处理 组件内的弹出框close问题

    <el-dialog custom-class="rental-pop" :close-on-click-modal="false" :append-to ...

  5. 微信小程序组件 加减号弹出框

    <!-- 点击立即抢拼弹出框 --> <view class='add-rob' bindtap="setModalStatus" data-status=&qu ...

  6. Vue父组件如何调用子组件(弹出框)中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  7. Popup中ListBox的SelectChange事件关闭弹出窗体后主窗体点击无效BUG

    WPF的BUG!弹出框的 自定义控件里有Popup, Popup里面放一个ListBox 在ListBox中的SelectionChange事件触发关闭弹出框后,主窗体存在一定概率卡死(但点击标题又能 ...

  8. 弹出框中选项卡的运用(easyUI)

    先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...

  9. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

随机推荐

  1. 设置tomcat字符编码

    Tomcat的默认编码是ISO-8859-1,如果有是get请求时,会出现乱码,这种情况可以修改Tomcat的编码解决,当然也可以写个过滤器来解决. 在tomcat的conf目录下,编辑server. ...

  2. unity 和 iOS/Android 信息交互(方法调用)

    参考文章均来源于[大神雨松momo]的文章. unity -> iOS // unity 程序 usingSystem.Runtime.InteropServices; usingUnityEn ...

  3. Java中URL重写(urlrewrite+Maven)

    一.UrlRewrite的作用   UrlRewrite即地址重写,用户得到的全部都是经过处理后的URL地址.将我们的动态网页地址转化为静态的地址,如html.shtml,还可以隐藏网页的真正路径.此 ...

  4. [LeetCode]Find Bottom Left Tree Value

    Find Bottom Left Tree Value: Given a binary tree, find the leftmost value in the last row of the tre ...

  5. R 语言—基本绘图

    https://www.harding.edu/fmccown/r/   这个网站上有壮观的 R 绘制的实际图形 下面只记录自己感兴趣的内容 单变量绘图下包含 1. 带状图 2. 茎叶图 3. 直方图 ...

  6. hdu 1397 (素数判定)

    一开始提交了这个,果断TLE #include <cstdio> #include <iostream> #include <string> #include &l ...

  7. Eclipse设置虚拟机参数 (转 构建内存溢出)

    Java -verbose:gc 中参数-verbose:gc 表示输出虚拟机中GC的详细情况. 首先在Eclipse的Debug页签中设置虚拟机参数: 步骤: 1.选中已经写好的项目 2.Run-& ...

  8. Thymeleaf学习记录(8)--表达式基本对象

    基础对象 #ctx:上下文对象 /* * ====================================================================== * See ja ...

  9. css实现修改默认滚动条样式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  10. 新手,再来1个 vue2入门的教程,有源码参考

    在这之前有入门的,作者写的不错的, 照着来一下,也收益颇多,上个例子是基于 "dependencies": {   "vue": "^2.2.6&qu ...