vue使用iview的modal弹窗嵌套modal出现格式错误的解决

目录
  • 使用iview的modal弹窗嵌套modal出现格式错误
    • 问题
    • 解决
  • iview View UI vue modal 报错 TypeError:t is undefined
    • 概述
    • bug图
    • 原因分析及解决办法
    • 其他延展

使用iview的modal弹窗嵌套modal出现格式错误

问题

一个全屏modal，点击按钮，再弹出一个modal，就会出现这种格式问题，很无语。

解决

搜了一下，说是因为modal的使用是平级的，z-index都是1000，所以后面的会覆盖前面的。

不知道是不是因为这个，因为我把嵌套的这个modal改成全屏的，就没有问题了。

解决办法是说给modal加一个类名， z-index改一下就行了，除了要改嵌套modal（以下简称modal2）的z-index，modal2的mask（阴影）也需要改。

<modal>111
<modal class="secondmodal">222</modal>
</modal>

<style>

.secondmodal .ivu-modal-mask{
z-index: 1009;
}
.secondmodal .ivu-modal-wrap{
z-index: 1009;
}

不知道为什么 这种方法对我没用。

所以后来采用了一种简单粗暴的方法，大家都知道modal只能设置宽度，如果想给modal设置高度，要设置styles。:styles="{height: '500px'}"，直接给他指定高度。

<Modal
  v-model="contentModal"
  title="年度小结"
  :mask-closable="false"
  :scrollable="true"
  :transfer="false"
  width="1000"
  :styles="{height: '500px'}"
  :footer-hide="true"
>
  <Form :model="contentForm"  :label-width="120"  ref="contentForm">
    <Input v-model="contentForm.content" type="textarea" :autosize="true" placeholder="请输入内容" />
  </Form>
</Modal>

直接解决！

iview View UI vue modal 报错 TypeError:t is undefined

概述

使用技术：vue 2.*系列 使用的 View UI modal弹框

今天在移动端显示弹框时，遇到这个问题。如果你也遇到类似问题，希望能够借鉴，早点找出问题。

bug图

原因分析及解决办法

原因： 由于我在html中写了一个方法，<div class="listBannerCardHa__item" @click="showBtn"> ...</div>，但是methods里面没有定义这个方法showBtn，导致程序被这个报错拦截，弹框无法显示。

解决办法： 去掉或者定义这个方法

其他延展

如果你也遇到类似问题，可以向这个方向去排查，

1.TypeError 类型相关的排查

2.把页面新加的内容，比如方法搜索排查一下，看看页面中有几处，有没有缺失或者多余

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue iview封装模态框的方法

    vue iview封装模态框的方法

    本文实例为大家分享了vue iview封装模态框的具体代码,供大家参考,具体内容如下 子组件 <template>   <Modal     :value="isShowModal"     :width="width"     :title="title"     @on-visible-change="getFaultModalStatusChange"   >     <slot name=

  • vue利用sync语法糖实现modal弹框的项目实践

    vue利用sync语法糖实现modal弹框的项目实践

    用过vue的开发者都知道vue是组件化开发的一个框架,基于组件化的原则,很多时候我们开发的时候都会把像modal.drawer这种弹框,抽屉类的组件作为一个单独的组件分出去,然后在在用到的页面引入进来这个时候就涉及到了visible 属性的父子组件的通信,我们常规的做法可以通过props,$emit的方式进行通信,但vue其实提供了一种更为优雅的实现方式,可以通过sync的语法糖来实现. 具体代码如下 父组件代码 <div class="flex"> <a-butto

  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如下: 代码解释:setTem是一个方法,改变modal为true,默认为false : chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据 效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重新编译子组件,则子组件的图表可以正常显示 分析:当点击btn时,modal框的确弹出来了,但

  • vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    目录 使用iview的modal弹窗嵌套modal出现格式错误 问题 解决 iview View UI vue modal 报错 TypeError:t is undefined 概述 bug图 原因分析及解决办法 其他延展 使用iview的modal弹窗嵌套modal出现格式错误 问题 一个全屏modal,点击按钮,再弹出一个modal,就会出现这种格式问题,很无语. 解决 搜了一下,说是因为modal的使用是平级的,z-index都是1000,所以后面的会覆盖前面的. 不知道是不是因为这个,

  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    问题现象 项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10. browserslist的配置如下: [ "> 1%", "last 2 versions"] 但开发环境的IE11打开显示白屏,F12打开显示: 分析过程 5306行显示 "./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错,由于eval()包含的代码中有ES6的语法,IE不支持,查了网上很多资料

  • Vue实现远程获取路由与页面刷新导致404错误的解决

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题 因为前端Vue+ElementUI项目是单页应用--即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误 三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将

  • 在vue项目中使用axios发送post请求出现400错误的解决

    目录 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 总结了错误的几个原因 vue axios400 Bad Request问题 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 1.bad request:“错误的请求" 2.invalid hostname:"不存在的域名” 我报的错是第一种bad request 总结了错误的几个原因 1.请求头错误,前端请求头的content-type和后端不一致 axios默认的请求头的

  • Yii2中如何使用modal弹窗(基本使用)

    Yii2中如何使用modal弹窗(基本使用)

    Modal也即是模态窗,通俗的说就是弹窗.是一款bootstrap的js插件,使用效果也是非常好. 为什么要使用modal就不必多说了,一个网站,在开发过程中你说你没用过js弹窗我都不信!好的弹窗不仅仅给人以美感,也会让我们开发效率提高,甚至心情也会舒畅! 我们看看在yii2中如何使用modal. 比如我们之前添加数据的时候,通常情况下会点击按钮跳转到添加页面,保存后再跳转到列表页. 现在我们希望点击添加按钮的时候,在当前页面弹窗添加数据,看具体实现. 1.use yii\bootstrap\M

  • yii2 modal弹窗之ActiveForm ajax表单异步验证

    前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了! 首先撇开modal不谈,我们就yii2 ActiveForm如何以Ajax的方式提交表单做一个简单的说明,这也是我们今天主题的重点,modal确实没啥好说了.后面若是有我再把话改回来. yii2中,ActiveForm默认做了客户端验证,但是表单的

  • yii2中结合gridview如何使用modal弹窗实例代码详解

    在上篇文章给大家介绍了Yii2中如何使用modal弹窗(基本使用),即以创建为例. 实际开发中,我们往往还会遇到列表页数据修改要使用modal的情况,如果是一般的循环展示,相信大多数人看了modal的基本使用都会操作,但是结合gridview估计有些人就开始吃不消了,我们看看如何解决这个问题! 1.gridview的操作增加[更新]按钮,并指定data-toggle data-target class以及data-id的值 [ 'class' => 'yii\grid\ActionColumn'

  • 浅析微信小程序modal弹窗关闭默认会执行cancel问题

    在我们使用小程序的modal组件时候,有的时候会碰到一个问题,那就是弹框的关闭,我们并没有选择取消或确定,而是点击弹框之外的部分,这个时候弹框会关闭,按理来说不会触发取消和确定的绑定事件,但是有的时候点击弹框之外的部分来关闭弹框会触发取消(cancel)绑定的事件,这是为什么呢? 如图是wxml页面 以下是页面对应的js内容 也就是说,就算我们不点击取消,点击弹框之外的部分,也会执行modelCancel方法. 后来发现,是header头的content-type在作怪,我们把header头里的

  • 微信小程序实现自定义modal弹窗封装的方法

    微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class

随机推荐