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. GitHub和git和repo的使用

    1. GitHub的使用 https://github.com/maogefff/GitHub-git-repo 2. git的使用 https://github.com/maogefff/GitHu ...

  2. 向tekkaman学习

    勤奋程度要向tekkaman学习,把这几年落下的补回来.

  3. Java - 枚举与注解

    Enumeration 于Java 1.5增加的enum type... enum type是由一组固定的常量组成的类型,比如四个季节.扑克花色. 在出现enum type之前,通常用一组int常量表 ...

  4. 网站压力测试 工具webbench

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好用,安装使用也特别方便,并且非常小. 主要是 -t 参数用着比较爽,下面参考了张宴的文章 ...

  5. 六、yarn运行模式

    简介 spark的yarn运行模式根据Driver在集群中的位置分成两种: 1)yarn-client 客户端模式 2)yarn-cluster 集群模式 yarn模式和standalone模式不同, ...

  6. sql = 和<>遵循的sql-92标准的设置SET ANSI_NULLS ON

    说明 SQL-92 标准要求在对空值进行等于 (=) 或不等于 (<>) 比较时取值为 FALSE. 当 SET ANSI_NULLS 为 ON 时,即使 column_name 中包含空 ...

  7. 【SSH网上商城项目实战24】Struts2中如何处理多个Model请求

       转自: https://blog.csdn.net/eson_15/article/details/51465067 1. 问题的提出 Struts2中如果实现了ModelDriven<m ...

  8. safari

    http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/ http://rawgit.com/zha ...

  9. ZJOI2012 网络——LCT相关题目

    有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这个图上,你 ...

  10. 20个网页设计师应该学习的CSS3经典教程实例

    CSS3技术离我们越近,我们也应该学习一些简单的CSS3技术了,而学习最基本的方法就是模仿,以及观看大师作品的案例.收集了20个基础教程,均是涉及到css3应用范围,值得你和我一起共同学习. Smoo ...