vue 使用Dialog对话框使用过程中出现灰色遮罩问题

问题描述：使用element ui 中的Dialog组件时，弹框出现灰色遮罩，点击弹出弹框按钮时，会显示弹框，但是不会高亮，还需要在点击一次弹框区域才会高亮，如下图：

官方文档解决方法如下图(官网地址：https://element.eleme.cn/#/zh-CN/component/dialog)，里面提供了一个append-to-body的属性，Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true，默认值为false：

解决方法：
在el-dialog标签上添加一个 :append-to-body=“true”

<el-dialog title="添加信息" :visible.sync="dialogFormVisible" :append-to-body="true">

vue 使用Dialog对话框使用过程中出现灰色遮罩问题相关推荐

dialog对话框初始化 mfc_MFC中Dialog初始化顺序
原文:http://blog.sina.com.cn/s/blog_472a9f0c0101ax3q.html 有需要的可以点击进去查看. 1.模式对话框的创建过程: 1)DoModal() 重载 ...
关于vue框架下载步骤以及过程中可能遇到的问题汇总
1.下载各个版本的vue框架链接介绍 | vue-element-admin 2.下载方法 1.去git网站下载git,如果git已经下载并安装好,该步可以省略 2.去nodejs网站下载node ...
vue element dialog 对话框
通过绑定:visible.sync属性来控制对话框 <template><el-card><el-button type="text" @click= ...
Vue 在图片加载过程中遇到的问题
今天在编写 Vue 项目时,遇到了一个图片加载问题,觉得还是蛮重要的,所以记录一下我之前一直以为 Vue 生命周期中的 mounted 是等所有资源加载完毕之后,再来执行,但是今天我在 mouten ...
elementUI Drawer 抽屉 Dialog 对话框等弹出组件的遮罩层以及多层遮罩解决办法
append-to-body 解决多层遮罩层覆盖的问题 <el-dialogtitle="编辑处理结果":visible.sync="dialogVisible&q ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
vue 只要一杯卡布奇诺时间，就能简单上手的Dialog对话框
来,效果图文件结构首先,你在vue的项目里面,找个合适的位置创建一个文件夹,创建一个vue的文件以及一个js文件代码如下: myDialog.vue <template><d ...
Vue组件封装 ——dialog对话框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建dialog.vue组件,可以自己取个名字 <script> export def ...
[vue] 说说你使用vue过程中遇到的问题（坑）有哪些，你是怎么解决的？
[vue] 说说你使用vue过程中遇到的问题(坑)有哪些,你是怎么解决的? 从详情页返回列表页时, 要保存所有状态, 比如: 滚动条位置, 数据, 下拉数据等当时想用keep-alive, 后来没用 ...

vue 使用Dialog对话框使用过程中出现灰色遮罩问题

vue 使用Dialog对话框使用过程中出现灰色遮罩问题相关推荐

最新文章

热门文章