解决el-dialog弹框多重嵌套,实现最好用的el-dialog

开发者体验度量:构建DevEx评估体系的方法论与工具 在深入讨论度量方法前,我们需要明确什么是开发者体验(DevEx)。许多人将其简化为"开发工具好不好用",这是一个危险的误解。开发者体验是指开发者在完成工作过程中的整体感受和效率,它由三大核心维度组成:工具与基础设施:开发、测试、部署工具链的效能流程与协作:工作流程的顺畅度和团队协作的效率文化与成长:支持实验、学习和专业发展的环境这三个维度相互作用,共同决定了开发者能否高效且愉悦地完成工作。开发者体验不是一个目的地,而是一段持续的旅程。 阅读详情

解决el-dialog弹框多重嵌套的问题。实现最好用的el-dialog

      随着vueJs的广泛使用,Element组件逐渐深入人心。但是在使用element组件的时候,难免会遇到一些问题。本文跟大家分享:如何解决el-dialog弹框的多重嵌套问题,实现最好用的私人dialog,当然‘最’可能有点吹流弊啦,用的好请点赞!。
      使用过el-dialog的小伙伴,应该都发现了:el-dialog不好用。 为什么不好用?
      1.弹框不支持嵌套
       2.多个弹框之间遮罩层会相互影响
      但是在我们实际使用的过程中,又经常会有嵌套弹框的需求。虽然按照饿了么提供的不嵌套解决方式(把弹框都平级堆在一起),再通过事件发送和监听等方式来也能绕开这些问题,但是这样下来你会发现:1.多级弹框调用之间需要发送很多事件,弹框相互调用变得很复杂 2.页面多了很多非业务逻辑控制代码(可读性变差) 3.遮罩层变得越来越黑。 4.弹框的可重用性变得很差 。比如弹框一里面打开弹框二,控制代码却要写到弹框一的父页面,这是不是有种隔墙挠痒的感觉!
      那么怎样的弹框才是合理的呢,废话不多说先放代码:

    add(){
            let option = {
                title: '添加项目',
                component: Add,
                _size_: 'small',
                data: {action: 'add'},
                callback(result){
                    this.loadList();
                }
            };
            common.dialog(option);
        }

      上面是打开弹框的代码,有没有感觉很简单。 在任何地方我们只要调用add()方法,就会打开内容为Add组件的弹框。我们只需要指定弹框的基本属性:标题title、内容data、大小size、传值。以及有时关闭弹框需要执行的回调函数(比如刷新列表啥的)。这样不仅实现了弹框和弹框体的解耦,而且完美的解决了:弹框嵌套以及遮罩相互影响问题。
下面揭露common.dialog()的神秘面纱,具体代码如下

common.dialog = function (option) {
    //dom为解决弹框嵌套以及弹框相互影响的核心
    var dom = document.createElement('div');
    document.getElementsByTagName('body')[0].appendChild(dom);
    var component = option.component;
    let template = '<div v-if="show"><el-dialog  :title="title" v-model="show" :before-close="handleClose" :size="size" @close="close"><child v-on:callback="callback" :init_data="data"> \
        </child></el-dialog></div>';
    var v = new Vue({
          el: dom,
          data: function () {
              return {
                  title: option.title,
                  size: option._size_ == null ? 'small' : option._size_,
                  modal: true,
                  close_on_press_escape: false,
                  show_close: true,
                  show: true,
                  data: option.data,
                };
            },
          template: template,
          mounted: function () {},
          methods: {
              handleClose(done){
                if (option.close) {
                  option.close();
                }
                done();
              },
              close() {
                if (option.close) {
                  option.close();
                }
              },
              callback(result) {
                if (!result.type || result.type == 'close' || result.type == 'cancel') {
                  this.show = false;
                } else if (result.type == 'sure') {
                  this.show = false;
                  if (option.callback) {
                    option.callback(result.data);
                  }
                }
              },
            },
          components: {
              child: option.component,
            },
        });
    return v;
  };

以上是common.dialog()的核心代码,可以直接使用。需要注意的是:

  1. 弹框内容的组件通过props:[“init_data”]接收option.data里面的值。
  2. 弹框内容组件如果需要调用关闭弹框方法
    1) 只是关闭弹框,不执行回调(相当于点击‘取消’按钮)

    this.$emit(“callback”,{type:'cancel'})
    2)关闭弹框并执行回调(相当于点击’保存’按钮)

    this.$emit(“callback”,{type:'sure',data:val });//其中val回调函数的参数

    3)点击弹框右上侧的X按钮,又想执行回调函数。只需在option里面定义option.close函数即可

    上面是common.dialog()的部分代码,基本解决了el-dialog存在的问题。

    经部分网友建议,现提供完整代码以及使用样例。CommonDialog 样例代码可直接使用

nvidia系列教程-AGX-Orin系统刷机及备份 NVIDIA AGX Orin 是一款高性能的嵌入式计算平台,专为边缘计算和 AI 应用而设计。为了确保系统的稳定性和适应不同的应用场景,用户可能需要对 AGX Orin 进行系统刷机和备份操作。本文将详细介绍如何完成这些操作,帮助您更好地管理和维护 AGX Orin 设备。通过以上步骤,您可以成功地为 NVIDIA AGX Orin 刷写系统并创建备份。这些操作不仅能帮助您保持系统的更新和安全,还能在遇到问题时快速恢复系统。 阅读详情

相关推荐

DDR内存Prefetch机制详解:从DDR1到DDR4的技术演进与性能提升

本文深入解析DDR内存Prefetch机制从DDR1到DDR4的技术演进与性能提升。通过分析Prefetch技术的实现原理与Burst传输的协同机制,揭示DDR1的2n Prefetch、DDR2的4n Prefetch、DDR3的8n Prefetch以及DDR4的Bank Group架构创新如何显著提升内存带宽与系统性能。

weixin_30369041的博客 537

el-dialog嵌套的影响、原因及解决方法

用Dialog嵌套Dialog所踩过的坑

卡卡的博客 1万+

WRF中使用ERA5再分析数据

   本人在做一些实例时,需要用到最新的ERA5再分析数据集,其中我下载的是ERA5 hourly data on pressure levels form 1979 to present和ERA5 hourly data on single levels from 1979 to present中的3天数据。 1、注册climate copernicus账号 下载ERA5数据前先要注册其账号 2、选择变量    WRF中对于气象数据的字段有具体的要求, ......

GIS 8168

el-dialog嵌套使用

最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,刚开始使用不是很熟练,也是走了很多小弯路,现在总结一下自己使用的一些小问题。 1.dialog嵌套时, ...

qq_44860613的博客 1万+

MTK-AWB 小结 (二)

调试总结:可以将offset 对应的ratio加大,保留更多的喜好色(偏色),影响WF statistic gain,从而影响最终的awb gain。这一部分前期CCT校准的时候就会算出一组默认值,当然这个offset offse 值用于优化T,S,wf 光下的偏色喜好度. offset。后面遇到 A H Shad 光收白或者偏色,还可以优化 A 的offset ,H offset,shad offset.new offset 计算过程(Day locus offset 和M/G offset )

qq_46056347的博客 1166

用R语言实现“中断时间序列分析” --- R code for ITS

ITS方法可用于评估一项干预措施的效果,从水平改变和斜率改变两个角度来描述干预引起的变化。

franksui的博客 4026

前端在el-dialog中嵌套多个el-dialog

前端在el-dialog中嵌套多个el-dialog

m0_50298323的博客 3658

Halcon 3D视觉实战:5步将线激光高度数据转为可分析的深度图与点云

本文详细介绍了如何利用Halcon平台将线激光高度数据转换为深度图与点云的5步实战方法。通过具体代码示例和工业检测案例(如锂电池胶水测量),帮助工程师高效处理3D视觉数据,实现从原始数据到三维可视化的完整技术链路。

weixin_29039773的博客 361

el-dialog嵌套问题,第二个弹窗会被遮住的解决办法

el-dialog嵌套问题,第二个弹窗会被遮住的解决办法

博哥的二进制世界 6402

Android-S无线模块前瞻

WiFi - mainlane非强制 S 采用反射的方法直接加载wifiservice,直接hook在systemserver上,无编译依赖。gms可以动态替换wifi服务。 R 采用直接启动service的方式,wifiservice仍然map在systemserver上。 WiFi - 11ad接口支持 11ad被wifi联盟商业化为WIGIG,提供短距的60GHZ载波,理论速度为当前5G 11ac的6倍。市面上基本没有手机支持,需要独立的芯片支撑此功能。 传输距离为3m以内,外界d.

头铁的伦的博客 1042

第二次 PX4仿真环境搭建过程全记录

参考链接 https://blog.youkuaiyun.com/yanwumuxi/article/details/80097294 https://www.ncnynl.com/archives/201709/2013.html 一、安装依赖项 我们使用Debian / Ubuntu LTS 作为Linux的标准支持版本,但是也支持Cent OS 和 Arch Linux的发行版本。 权限设置 警告:永远...

移步换景的博客 2261

vue el-dialog 实现弹窗无限嵌套(点击弹窗弹出新的弹窗,可以一直点击)

创建文件夹 testDialog 文件夹 根据自己需要创建文件夹(这个是我用于演示的,根据自己项目自行创建就可以)要求点击数据展示弹窗,弹窗中数据点击显示新的弹窗,里面的弹窗还可以继续点击新的弹窗,可以无限制的嵌套弹窗。剩下两个文件按照这个自行创建即可 想无限制循环 最后一个文件的弹窗写到第一个 就可以无限制嵌套!原因:因为有些弹窗既是父弹窗又是子弹窗,所以使用的时候会报错,报一个循环嵌套错误。可以一直无限制的点击 无限制的嵌套。commonData.js 文件。

记录常见的问题以及解决办法 1万+

LLaMA Factory添加新模型template的实战解析

本文主要介绍了LLaMA Factory添加新模型template的实战解析,希望对使用大语言模型的同学们有所帮助。 文章目录 1. 前言 2. 实战解析 2.1 检查代码 2.2 修改代码

herosunly的博客 19万+

Element UI弹窗居中的‘坑’我帮你踩完了:从CSS原理到Vue3深度选择器实战

本文深入探讨了Element UI弹窗组件el-dialog的垂直居中问题,从CSS布局原理到Vue2/Vue3的深度选择器实战,提供了Flex、Transform和绝对定位等多种解决方案。特别针对Vue3的样式隔离机制,详细介绍了:deep()选择器和CSS Modules的最佳实践,帮助开发者高效解决弹窗居中难题。

weixin_30737899的博客 321

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

Element Plus:Vue 3时代的企业级UI组件库全面解析

你是否曾为Vue 3项目寻找一个既专业又易用的UI组件库而烦恼?在众多选择中,Element Plus凭借其强大的功能、优雅的设计和完整的生态支持脱颖而出。作为Element UI的现代化继承者,这个完全开源的Vue 3 UI库不仅提供了60多个精心设计的组件,更带来了TypeScript原生支持和现代化的Composition API架构,让企业级应用开发变得更加高效和愉悦。 ## 为什么Vu

gitblog_01087的博客 337

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

Vue 完整版系统知识文档

《Vue全栈开发实战手册》摘要 本手册系统整合Vue2/Vue3全栈知识体系,涵盖基础语法、组件开发、状态管理、工程化等核心内容,适合从入门到精通的完整学习路径。主要特点: 基础核心 详解MVVM架构和响应式原理(Vue2的Object.defineProperty vs Vue3的Proxy) 完整模板语法规则与16种内置指令解析 组件系统核心:通信机制(8种方案)、插槽、动态组件、递归组件 进阶实战 状态管理:Vuex/Pinia完整解决方案 路由开发:动态路由、权限控制、懒加载 工程化:Webpack

专注 Java 后端开发,分享基础语法、JVM、并发、Spring 全家桶、微服务、分布式、性能优化等实战干货。坚持输出高质量技术笔记,用简单语言讲清复杂原理,助力每一位 Java 开发者稳步进阶。 400

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

vue复用组件之弹窗组件复用

一 思路 1.定义 在共用组件文件夹中,建立一个vue文件,在elementui中复制el-dialog标签内容,加一个自己的插槽(用来自定义弹窗内容),prop 传一个title(用来自定义弹窗标题),在methods写两个方法,一个open打开弹窗(在将来的父组件中调用子组件方法),一个handleDefine(用来调用父组件中的确定方法) 2.全局注册 在main.js中引入组件,Vue.use(‘diaLog’, diaLog) 3.使用组件,在使用组件的位置@子组件的handleDefi

vue6214的博客 2903

VUE3+element plus在el-tabs内部有多个el-dialog时,遮罩会叠加

有问题的效果,遮罩层是黑色的,需要多次点击才能关闭dialog。

nopyramid的博客 1461

el-dialog嵌套el-dialog问题

⼀定要⽗级 el-dialog :modal-append-to-body=“false” ⼦级 el-dialog 同时加上 :append-to-body=“true” 含义: modal-append-to-body 遮罩层是否插⼊⾄ body 元素上,若为 false,则遮罩层会插⼊⾄ Dialog的⽗元素上 append-to-body Dialog ⾃身是否插⼊⾄ body 元素上。嵌套的 Dialog 必须指定定该属性并赋值为true ...

负数 4132

Dialog 对话框里面嵌套了一个Dialog 对话框

Dialog 对话框里面嵌套了一个Dialog 对话框,解决办法:append-to-body 关键代码如下: <html> <head> …… </head> <body> <div class="dept"> <el-dialog width="450px" :visible.sync="dialogVis...

xiaoma19941027的博客 3768

vue3+TS实战中Dialog弹窗封装复用技巧(修改和添加共用一个弹窗)涉及组件的传值(defineProps)和组件的自定义事件(emits)

组件的功能封装是前端工程师的必备技能,Dialog弹窗在后台管理系统中是使用频率非常高的组件,添加和修改数据基本都会用到,本文就讲讲在vue3和ts的项目中如何封装Dialog组件,实现代码高复用.

weixin_45745641的博客 7931

vue el-dialog嵌套解决无法点击问题

当你在 el-dialog 上嵌套另一个 el-dialog 窗口时,可能会遇到内部对话框无法点击的问题。这通常是由于嵌套对话框的遮罩层(overlay)或其他样式问题造成的。如果你的 el-dialog 组件支持 append-to-body 属性,你可以将对话框附加到 body 元素上,以避免 z-index 问题。

u013008898的博客 1423

ElementUI 对话框el-dialog嵌套问题

ElementUI对话框组件嵌套显示出现父组件无法正常显示和子组件无法正常关闭问题解决方法

weixin_44700621的博客 5011

Vue Element UI 弹窗 el-dialog嵌套与遮罩层最佳实践总结

摘要:本文探讨了Element UI嵌套弹窗(Modal)的常见问题及解决方案。通过分析append-to-body和modal-append-to-body属性的作用,提出最佳实践方案:将弹窗组件放在父级管理,子组件仅处理内容;推荐设置append-to-body=true和modal-append-to-body=false,避免遮罩层和层级问题。文中还提供了代码示例和设计原则,强调弹窗行为与内容分离、事件传递清晰、界面简洁的重要性。该方案能有效解决嵌套弹窗的显示异常问题,提升用户体验。

1769

多个dialog对话框同时出现的解决方法

多个dialog对话框同时出现的解决方法

qq_45900905的博客 2656

解决办法:Element UI中el-dialog双层嵌套问题,遮罩显示异常处理

1.给被嵌套的dialog增加custom-class属性 和append-to-body属性 <el-dialog custom-class="el-dialog-s" append-to-body :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> 2.自定义样式,覆盖追加append-to-bod...

lh_seckill的博客 4257
下一篇: 美团Java后台一面
菜鸡小酌
博客等级 码龄9年 6粉丝 3原创
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值