Vue开发中出现对话框被遮罩层挡住问题解决方案

在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示：造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值，比较简单易行的办法如下：对于bootstrap Modal需要添加css语句.modal-backdrop { z-index: -1;}而对于

java_augur

11840人浏览 · 2018-05-17 02:43:18

java_augur · 2018-05-17 02:43:18 发布

在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示：

造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值，比较简单易行的办法如下：

对于bootstrap Modal需要添加css语句

 
  .modal-backdrop 
   { 
 
  z-index 
  :  
  -1 
  ; 
 
  }

而对于Element UI该组件已经在属性层面提供了解决办法，只要添加

 
   :modal-append-to-body 
   = 
   " 
   false 
   " 
  

就可以了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^