element-ui中弹框dialog不显示，仅背景变灰

亦凉 2023-05-29 05:17 34阅读 0赞

# 1.问题描述 #

根据element官网的对话框代码，使用时会发现弹框不显示，需要增加一个属性

:append-to-body="true"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]

# 2.加上之后效果 #

<template>
    	<el-button type="text" size="mini" @click="copyPanel = true">复制</el-button>
    		 <el-dialog
    		    title="复制仪表板"
    		    :visible.sync="copyPanel"
    		    :append-to-body="true"
    		    width="530px">
    			  <el-form size="small" :model="formCopyPanel" ref="formCopyPanel" label-width="109px">
    				 <el-form-item label="复制到">
    					  <el-select v-model="formCopyPanel.position" placeholder="" style="width: 360px;">
    						 <el-option label="仪表板" value="仪表板"></el-option>
    						 <el-option label="来点原因分析" value="来点原因分析"></el-option>
    					 </el-select>
    				 </el-form-item>
    			 </el-form>
    		     <div slot="footer" class="dialog-footer">
    				 <el-button @click="copyPanel = false">取 消</el-button>
    				 <el-button type="primary" @click="copyPanel = false">确 定</el-button>
    		     </div>
    		</el-dialog>
    </template>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104164902273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关 element-ui中弹框dialog不显示

一、问题描述今天在写vue项目时候，遇见如下需求：点击编辑按钮弹出一个dialog,dialog中的表单展示当前行显示数据，然后编辑后保存。但是我点击后，出

待我称王封你为后i/ 2023年10月07日 09:29/ 0 赞/ 20 阅读

相关页面变灰操作

<html lang="en"style=" -webkit-filter: grayscale(100%); -moz-filter: graysca

不念不忘少年蓝@/ 2023年10月04日 20:14/ 0 赞/ 39 阅读

相关网页变灰方法

网页变灰方法 <style type="text/css"> html { filter:grayscale(100%); -webk

太过爱你忘了你带给我的痛/ 2023年09月26日 17:09/ 0 赞/ 94 阅读

相关 element-ui中弹框dialog不显示，仅背景变灰

1.问题描述根据element官网的对话框代码，使用时会发现弹框不显示，需要增加一个属性 :append-to-body="true" ![在这里插入图片描

亦凉/ 2023年05月29日 05:17/ 0 赞/ 35 阅读

相关 ElementUI - input 框组件设置透明背景（样式覆盖）

前言有时后，`input` 框可能需要设置为透明背景来与大背景图融合，如下图所示： ![在这里插入图片描述][20210508110035259.png] 解决

秒速五厘米/ 2023年01月19日 04:58/ 0 赞/ 346 阅读

相关 uniapp显示提示框背景变暗_uniapp样式问题归纳总结

1.头部导航栏下拉弹框 ![20f4f30a0fc3d677cfa2b7a016efe3a6.png][] 单纯的下拉弹框，我们在很多组件中都可以找到，但是放在头部导航的位

绝地灬酷狼/ 2022年10月26日 14:07/ 0 赞/ 345 阅读

相关 html中弹框背景变暗,点击弹出窗口层，并且背景变暗渐变

点击弹出窗口层，并且背景变暗渐变---网页特效观止|www.jscode.cn|网页特效代码 body \{font-size:12px;background:\9EC7E7

水深无声/ 2022年10月10日 15:51/ 0 赞/ 101 阅读

相关 el-dialog不显示问题

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5Y-q54eV5LuU_size_15

今天药忘吃喽~/ 2022年09月16日 04:56/ 0 赞/ 247 阅读

相关 bitmap变灰

`public static final Bitmap grey(Bitmap bitmap) {` ` ` `int width = bitmap.getWid

阳光穿透心脏的1/2处/ 2022年08月07日 03:37/ 0 赞/ 232 阅读

相关弹框时背景变暗特效

<html> <head> <meta charset="UTF-8"> <title></title>

小咪咪/ 2022年05月29日 02:39/ 0 赞/ 187 阅读