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. ios碎片小记

    一.UIImageView 1.图片形状设为圆形时可能会由于图片的宽高比例导致显示出来的效果不是圆形 解决:设置UIImageView的contentMode为UIViewContentModeSca ...

  2. Spring 学习(十)--- Dispatch 分发逻辑

    问题 : Spring 分发逻辑是如何的 概述 本文讲解Spring 请求到返回视图的分发过程. 分发逻辑 分发逻辑可以使用下图来表示. 总共七个步骤 : 接收请求,经过 DispatcherServ ...

  3. 深入分析ReentrantLock公平锁和非公平锁的区别 (转)

    在ReentrantLock中包含了公平锁和非公平锁两种锁,通过查看源码可以看到这两种锁都是继承自Sync,而Sync又继承自AbstractQueuedSynchronizer,而AbstractQ ...

  4. Code Signal_练习题_arrayChange

    You are given an array of integers. On each move you are allowed to increase exactly one of its elem ...

  5. Spring cloud Zuul网关异常处理

    Spring cloud Zuul网关异常处理 一 异常测试: 1> 创建一个pre类型的过滤器,并在该过滤器的run方法实现中抛出一个异常.比如下面的实现,在run方法中调用的doSometh ...

  6. jQuery全能图片滚动插件

    插件开发背景 随着前端开发领域越来越受到重视,前端开发也变得越来越火热.各种优秀的前端组件层出不穷.尤其是jQuery插件,很多前端组件都是基于jQuery开开发的. 图片滚动是前端开发中可以说是非常 ...

  7. Bootstrap 3.0的扁平化来了

    Bootstrap 3 RC1 发布了,从官方上看,Bootstrap 3 似乎也开始趋于扁平化的风格设计. 网站UI和Button bootstrap 2.3.2以下的整体UI和图标是以box-sh ...

  8. 用CSS3/JS绘制自己想要的按钮

    我认为按钮的绘制分以下三个步骤 第一步,绘制按钮的轮廓 选择合适的html标签,设置轮廓的CSS /* html代码 */ <a href="#" class="b ...

  9. ztree 获取当前选中节点的子节点集合

    功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...

  10. 用Java开发贪吃蛇游戏

    贪吃蛇游戏的设计步骤: Part 1: 设计游戏图纸 画出900*700的白色窗口 在窗口上添加画布 在画布上添加标题 在画布上添加黑色游戏区 Part 2: 放置静态的蛇:一个头.两个身体 加上开始 ...