解决vue2项目 el-dialog弹窗不显示

初始写法 使用了v-model 弹窗不显示

<el-dialog v-model="dialogVisible" title="Popup Content" :width="dialogWidth" @close="handleCloseDialog"><p>{{ selectedItemContent }}</p></el-dialog>

将v-model改为:visible.sync="dialogVisible" 就可以了

  <el-dialog :visible.sync="dialogVisible" title="Popup Content" size="large" @close="handleCloseDialog"><p>{{ selectedItemContent }}</p><template v-slot:footer><div style="text-align: right"><el-button @click="handleCloseDialog">关闭</el-button><el-button @click="handleSubmit" type="primary">确认</el-button></div></template></el-dialog>

但是此时的弹窗在遮罩层底下 无法点击关闭

我们还需要增加一个配置::append-to-body="true"

 <el-dialog :visible.sync="dialogVisible" title="Popup Content" size="large" @close="handleCloseDialog" :append-to-body="true"><p>{{ selectedItemContent }}</p><template v-slot:footer><div style="text-align: right"><el-button @click="handleCloseDialog">关闭</el-button><el-button @click="handleSubmit" type="primary">确认</el-button></div></template></el-dialog>

这样就可以啦 如图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/237666.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023.12.19 关于 Redis 通用全局命令

目录 引言 Redis 全局命令 SET & GET KEYS EXISTS DEL EXPIRE TTL TYPE redis 引入定时器高效处理过期 key 基于优先级队列方式 基于时间轮方式 引言 Redis 是根据键值对的方式存储数据的必须要进入 redis-cli 客户端程序 才能输入 redis 命令 Redis 全局命令 R…

【藏经阁一起读】(80)__《2023龙蜥社区白皮书》

【藏经阁一起读】&#xff08;80&#xff09;__《2023龙蜥社区白皮书》 2023龙蜥社区白皮书 作者&#xff1a; 小龙 发布时间&#xff1a;2023-11-15 章节数&#xff1a;79 内容简介&#xff1a; 从解决CentOS停服的问题出发为广大用户的业务连续性提供了坚定的保障&#xf…

C# 使用MSTest进行单元测试

目录 写在前面 代码实现 执行结果 写在前面 MSTest是微软官方提供的.NET平台下的单元测试框架&#xff1b;可使用DataRow属性来指定数据&#xff0c;驱动测试用例所用到的值&#xff0c;连续对每个数据化进行运行测试&#xff0c;也可以使用DynamicData 属性来指定数据&…

用友U8+CRM help2 任意文件读取漏洞复现

0x01 产品简介 用友U8 CRM客户关系管理系统是一款专业的企业级CRM软件&#xff0c;旨在帮助企业高效管理客户关系、提升销售业绩和提供优质的客户服务。 0x02 漏洞概述 用友 U8 CRM客户关系管理系统 help2接口处存在任意文件读取漏洞&#xff0c;攻击者通过漏洞可以获取到服…

RK3568平台 并发与竞争控制机制总结

一.并发与竞争机制总结 二.原子操作 “原子”是化学世界中不可再分的最小微粒&#xff0c;一切物质都由原子组成。在Linux 内核中的原子操作可以理解为“不可被拆分的操作”&#xff0c;就是不能被更高等级中断抢夺优先的操作。在C语言中可以使用以下代码对一个整形变量赋值。…

C#文件操作(二)

一、前言 文章的续作前文是&#xff1a; C#文件操作&#xff08;一&#xff09;-CSDN博客https://blog.csdn.net/qq_71897293/article/details/135117922?spm1001.2014.3001.5501 二、流 流是序列化设备的抽象表示序列化设备可以线性方式储存数据并可按照同样的方式访问一次…

IgH调试注意事项

1&#xff0c;不要在虚拟机测试&#xff0c;否则IgH无法收发数据包 现象&#xff1a;虚拟机中运行IgH master并绑定网卡后&#xff0c;主站由ORPHANED状态转换成IDLE状态&#xff0c;但无法收发数据报。 这是因为虚拟机用的是虚拟网卡&#xff0c;需通过iptables将数据包到转…

【前端基础】script引入资源脚本加载失败解决方案(重新加载获取备用资源)

问题描述 现在假设有一个script资源加载失败&#xff0c;代码如下 <!DOCTYPE html> <html> <head><title>script 资源加载失败</title> </head> <body><script src"http:hdh.sdas.asdas/1.js"></script> &l…

openGuass:极简版安装

目录 一、openGauss简介 二、初始化安装环境 1.创建安装用户 2.修改文件句柄设置 ​3.修改SEM内核参数 4.关闭防火墙 6.禁用SELINUX 7.安装依赖软件 8.重启服务器 三、安装数据库 1.下载安装包 2.创建安装目录 3.解压安装包 4.执行安装 5.验证安装 四、gsql工具…

【大数据存储与处理】第一次作业

hbase 启动步骤 1、启动 hadoop&#xff0c;master 虚拟机&#xff0c;切换 root 用户&#xff0c;输入终端命令&#xff1a;start-all.sh 2、启动 zookeeper&#xff0c;分别在 master、slave1、slave2 虚拟机终端命令执行&#xff1a;zkServer.sh start 3、启动 hbase&#x…

Tomcat报404问题解决方案大全(包括tomcat可以正常运行但是报404)

文章目录 Tomcat报404问题解决方案大全(包括tomcat可以正常运行但是报404)1、正确的运行页面2、报错404问题分类解决2.1、Tomcat未配置环境变量2.2、IIs访问权限问题2.3、端口占用问题2.4、文件缺少问题解决办法&#xff1a; Tomcat报404问题解决方案大全(包括tomcat可以正常运…

04-JVM字节码文件结构深度剖析

一、源代码 package com.tuling.jvm;public class TulingByteCode {private String userName;public String getUserName() {return userName;}public void setUserName(String userName) {this.userName userName;} }二、通过javap -verbose TulingByteCode .class反编译 //…

【Spring Security】打造安全无忧的Web应用--进阶篇

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Spring Security的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.导入相关配置 1.pom 2.ym…

【sgDragUploadFolder】自定义组件:自定义拖拽文件夹上传组件,支持上传单个或多个文件/文件夹,右下角上传托盘出现(后续更新...)

特性&#xff1a; 支持在拖拽上传单个文件、多个文件、单个文件夹、多个文件夹可自定义headers可自定义过滤上传格式可自定义上传API接口支持显示/隐藏右下角上传队列托盘 sgDragUploadFolder源码 <template><div :class"$options.name" :dragenter"i…

.Net Core webapi RestFul 统一接口数据返回格式

在RestFul风格盛行的年代&#xff0c;大部分接口都需要一套统一的数据返回格式&#xff0c;那么我们怎么才能保证使用统一的json数据格式返回呢&#xff0c;下面给大家简单介绍一下&#xff1a; 假如我们需要接口统一返回一下数据格式&#xff1a; {"statusCode": …

智能图像编辑软件Luminar Neo mac提供多种调整和滤镜选项

Luminar Neo mac是一款由Skylum公司开发的AI技术图像编辑软件&#xff0c;旨在为摄影师和视觉艺术家提供创意图像编辑解决方案。Luminar Neo拥有强大的AI技术和丰富的后期处理工具&#xff0c;可帮助用户快速轻松地实现从基本到高级的图像编辑需求。 Luminar Neo提供了多种调整…

同步与互斥(二)

一、谁上锁就由谁解锁&#xff1f; 互斥量、互斥锁&#xff0c;本来的概念确实是&#xff1a;谁上锁就得由谁解锁。 但是FreeRTOS并没有实现这点&#xff0c;只是要求程序员按照这样的惯例写代码。 main函数创建了2个任务&#xff1a; 任务1&#xff1…

先进制造身份治理现状洞察:从手动运维迈向自动化身份治理时代

在新一轮科技革命和产业变革的推动下&#xff0c;制造业正面临绿色化、智能化、服务化和定制化发展趋势。为顺应新技术革命及工业发展模式变化趋势&#xff0c;传统工业化理论需要进行修正和创新。其中&#xff0c;对工业化水平的判断标准从以三次产业比重标准为主回归到工业技…

Kubernetes 容器编排(7)

离线业务编排详解 在线业务和离线业务 在线业务 Deployment、StatefulSet以及 DaemonSet 这三个编排概念的共同之处是&#xff1a;它们主要编排的对象&#xff0c;都是"在线业务"&#xff0c;即&#xff1a;Long Running Task&#xff08;长作业&#xff09;。比如…

尚硅谷 java 2023(基础语法)笔记

一、变量与运算符 1、HelloWorld的编写和执行 class HelloChina{public static void main(String[] args){System.out.println("hello,world!!你好&#xff0c;中国&#xff01;");} } 总结&#xff1a; 1. Java程序编写和执行的过程&#xff1a; 步骤1&#xff1…