使用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.把页面新加的内容,比如方法搜索排查一下,看看页面中有几处,有没有缺失或者多余

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

vue使用iview的modal弹窗嵌套modal出现格式错误的解决的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. ios – Xcode只看到一些嵌套类的类似扩展,这些扩展是用不同的文件编写的

    解决方法我遇到过类似的问题,似乎编译器正在尝试处理扩展嵌套类的文件,在嵌套类定义之前.因此,您有此错误说该Space没有成员SomeClass.我发现的解决方案是转到目标设置,打开BuildPhases.在“编译源”部分中,您应该将用于定义嵌套类的文件放在扩展它的文件上.这个解决方案似乎甚至可以很好地与您的观察结果一致,当您重新创建文件时,它有时会编译,因为当您重新创建文件时,它在编译源中的位置会发生变化.

  3. ios – 嵌套递归函数

    我试图做一个嵌套递归函数,但是当我编译时,编译器崩溃.这是我的代码:编译器记录arehere解决方法有趣的…它似乎也许在尝试在定义之前捕获到内部的引用时,它是bailing?以下修复它为我们:当然没有嵌套,我们根本没有任何问题,例如以下工作完全如预期:我会说:报告!

  4. ios – 在swift中将捕获列表正确放置在嵌套闭包中

    在Swift中为哪些嵌套闭包定义捕获的引用?如果[weakself]被捕获在只有内部最后面的闭包,GCD将保留ExampleDataSource,直到块完成执行,这就解释了为什么调试看起来像这样:同样的事情会发生,如果没有捕获列表被包括,我们从来没有可选地解开自己,尽管编译器,确实试图警告你!

  5. ios – 无效的软件包 – 嵌套软件包没有在CFBundleSupportedPlatforms Info.plist键中列出的正确平台

    我上传了一个应用程序到iOSAppStoretestflight.iOSAppStore收到以下电子邮件:InvalidBundle–Anestedbundledoesn’thavetherightplatformslistedinCFBundleSupportedplatformsInfo.plistkey.Oncetheseissueshavebeencorrected,youcanthenr

  6. ios – 如何在使用嵌套上下文时自动设置Core Data关系

    解决方法想到的第一个想法是,虽然姓名的人际关系是不可选的,但你并没有说Person的姓名关系也是不可选的.创建一个没有名字的人,可以用您的代码处理,然后在实际需要时创建名称吗?当然不用打扰自定义awakeFromInsert…

  7. cocoa-touch – Interface Builder:如何选择嵌套元素?

    在界面构建器中是否有一种方法可以看到我的元素树,以便我可以选择它们.在实际视图中选择内容非常困难,特别是当我有很多元素和嵌套视图等时.谢谢解决方法尝试按住shift并右键单击元素.它应该显示该元素下的视图层次结构的菜单.实际上,等一下,在层次结构中显示出这个元素之上的元素.你想要做的是使用Nib窗口,选择’Window’然后设置它的列视图,这样你就可以更轻松地导航.

  8. 寒城攻略:Listo 教你 25 天学会 Swift 语言 - 21 Nested Types

    //***********************************************************************************************//1.nestedTypes(类型嵌套)//________________________________________________________________________________

  9. Swift基础语法: 22 - Swift的函数类型, 嵌套函数

    前面我们讲解了函数里面的形参,现在让我们继续来看看函数的类型,以及嵌套函数,让我们一起来看看:1.使用函数类型在Swift中的函数声明和在OC中没什么区别,只有语法上的差异,但在Swift中有一项比较有趣的就是,声明变量或者常量的时候也是可以指定返回值的,比如:当然,常量也是可以如此的,这里就不多做解释了,想知道的朋友可以自己回去试试.2.作为形参类型的函数类型还有更好玩的就是,我们可以在声明新的

  10. Swift类型嵌套

    Swift中的类,结构体和枚举可以进行嵌套,即在某一类型的内部定义类,这种类型嵌套在JAVA中称为内部类,在C#中称为嵌套类,它们的形式和定义是相似的,类型嵌套的有点是能够访问它外部的成员,包括方法,属性和其他的嵌套类型,嵌套还可以有多个层次示例:

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部