E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
el-dialog
el-dialog
嵌套使用,只显示遮罩层的问题
直接上解决方法我是不建议嵌套使用的,平级也能调用,层级是按点击顺序的这两个方法还是有用的,比如跳转其他页面保留
el-dialog
显示状态,可以使用如果有用,请给我点赞收藏,我会很开心,谢谢
立哥Sole
·
2024-01-18 13:13
vue.js
elementui
前端
在
el-dialog
编辑界面el-upload跳动问题
el-dialog
中有子组件el-upload,并且做了只能显示一个文件的限制1.在第一次打开后,关闭dialog,再打开dialog会有跳动这是因为之前打开的dialog中,文件仍旧在,新一次的打开的文件把上一次顶掉了
Frilled Lizard
·
2024-01-17 16:52
vue.js
elementui
前端
javascript
开发语言
el-form验证问题
1.如果第一次打开
el-dialog
有验证失败,重新打开
el-dialog
仍然会有验证失败解决方案:给
el-dialog
绑定close事件,并调用clearValidate()closedialog()
Frilled Lizard
·
2024-01-17 14:17
vue.js
elementui
前端
javascript
开发语言
js
关于element中
el-dialog
设置append-to-body样式不生效问题
最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性,这样我在下面修改样式就不生效,前端不就玩的个样式吗?如果样式都没用了,还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉,这样的话样式就生效了。这里说另一种方法!!!在assets目录新建一个dialog.css文件,用来修改嵌套的dialog。然后在组件中给他从新命名一个名字在dial
小政爱学习!
·
2024-01-15 19:25
vue.js
javascript
ecmascript
v-if控制div内容显示,克隆这个div但是v-if没有效果
我子页面有个
el-dialog
,
el-dialog
里面有个大的div它的id为app-pre-meet-add,在子页面我通过isPdf来显示我想要的内容。现在我在父页面先通过this.
Rrar
·
2024-01-15 02:44
vue.js
javascript
ecmascript
elementui dialog 回车时却刷新整个页面
使用
el-dialog
弹出一个表单,当我无意间敲到回车键时,整个页面被刷新了,又是一脸的懵逼。。。经过查找文档发现解决方案为上述截图标记。。。
zhaocarbon
·
2024-01-10 07:44
elementui
前端
javascript
前端在
el-dialog
中嵌套多个
el-dialog
前端在
el-dialog
中嵌套多个
el-dialog
一、应用场景二、代码实现一、应用场景应用场景:需要点击按钮后弹出第一层对话框,在第一层对话框中填写内容后,再点击确认弹出第二层对话框,且需将第一层填入的内容传递给第二层
Vamp_Piece
·
2024-01-10 03:21
前端
Vue
前端开发踩坑记录
1024程序员节
前端
vue.js
elementui
关于在vue中获取
el-dialog
中的ref时获取不到的解决方案
在打开dialog或者直接获取dialog的内部元素时,使用this.$refs.xxx来获取相关内容时,因为还未加载出dialog,所以无法获取的相关内容,即使使用this.$nextTick(()=>{this.$refs.xxx})也无法正常获取解决方案:在进入页面时,开启dialog,设置dialog的rendered属性为true,再关闭dialog,这个过程因为很快,并不影响用户体验。
蓝蓝红同学
·
2024-01-09 20:54
el-dialog
的before-close
element官方文档中before-close仅当用户通过点击关闭图标或遮罩关闭Dialog时起效。如果你在footer具名slot里添加了用于关闭Dialog的按钮,那么可以在按钮的点击回调函数里加入before-close的相关逻辑。点击打开Dialog这是一段信息取消确定exportdefault{data(){return{dialogVisible:false};},methods:{
~Serendipity~
·
2024-01-09 11:19
elementui
vue3
el-dialog
附件:将文件拖到此处,或点击上传1.最多可上传10个附件,附件大小不得超过8M;不可以上传附件或删除附件取消确定import{ElForm,ElMessage}from'element-plus'constdialogFormVisible=ref(true)//对话框显示与否constroleObject=ref()//弹框字段表constrecordData=reactive({names:'
圆脸喜欢吃菠萝
·
2024-01-07 08:31
vue.js
elementui
javascript
关于element-ui中el-tree默认选择节点视图不更新问题的解决方案。
1、问题描述:在使用element-ui和Vue2.0的时候出现了以下问题:上述代码为el-tree的代码,我将el-tree放在了
el-dialog
中,当我点击不同的el-button时,调用不同的接口
国荃
·
2024-01-04 02:24
Vue
Element-ui
vue.js
elementui
将
el-dialog
设置为全屏( :fullscreen=“true“)后还是存在遮罩层和滚动条
解决:将
el-dialog
的margin设置为0即可.big-box{:deep(.
el-dialog
){margin:0px!important;}}
₍•ʚ•₎呀呀
·
2023-12-31 01:56
vue.js
javascript
前端
vue
el-dialog
封装成子组件
直接上代码!代码实现子组件内容子组件弹出框关闭发起合同审批exportdefault{name:'DialogForm',props:{DialogFlag:{default:false}},data(){return{//开关dialogVisible:false,}},watch:{DialogFlag(){this.dialogVisible=this.DialogFlag}},creat
Z_Xshan
·
2023-12-30 15:18
vue.js
javascript
前端
el-dialog
弹窗拖动+拉伸
importVuefrom"vue";/**定义公共js里,在入口文件main.js中import;*给elementUI的dialog上加上v-dialogDrag指令就可以实现弹窗的全屏和拉伸了。*///v-dialogDrag:弹窗拖拽+水平方向伸缩Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){//弹框可拉伸最小宽高l
不抽烟的小王
·
2023-12-26 20:19
vue.js
javascript
elementui
实现
el-dialog
可拖动
新建dialog.js文件importVuefrom'vue'//v-dialogDrag:弹窗拖拽Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){constdialogHeaderEl=el.querySelector('.el-dialog__header')constdragDom=el.querySelector('.
不抽烟的小王
·
2023-12-26 20:48
vue2_Element_UI
vue.js
javascript
elementui
隐藏<
el-dialog
>组件的右上角关闭按钮
你可以通过设置show-close属性为false来隐藏组件的右上角关闭按钮。具体代码如下所示:修改之前:修改之后的效果:
艾特NND
·
2023-12-25 14:57
vue.js
前端
经验分享
elementui
Element-UI的v-loading和
el-dialog
冲突
......当v-loading设置fullscreen时,
el-dialog
模态框会被v-loading的遮罩层遮住,这时候,我用了很多种方法,包括设置z-index等,都没什么作用。
GENT_le
·
2023-12-25 14:36
el-dialog
(对话框)入门学习
el-dialog
(对话框)入门学习适用场景新增和编辑操作想要以弹框的方式显示,使用到
el-dialog
知识点
el-dialog
的title设置标题
el-dialog
的visible.sync控制弹框的显示
自律最差的编程狗
·
2023-12-24 03:51
element-ui
学习
elementui
解决vue2项目
el-dialog
弹窗不显示
初始写法使用了v-model弹窗不显示{{selectedItemContent}}将v-model改为:visible.sync="dialogVisible"就可以了{{selectedItemContent}}关闭确认但是此时的弹窗在遮罩层底下无法点击关闭我们还需要增加一个配置::append-to-body="true"{{selectedItemContent}}关闭确认这样就可以啦如图
paradoxaaa_
·
2023-12-23 14:51
笔记
vue.js
elementui
javascript
不会封装函数式调用组件?也许你卡在了这里
有些小伙伴可能就简单的封装一个,这种功能也是很完备的缺点:需要引入额外响应式变量,方法去控制优点:像
el-dialog
一样,适合需要定制性更大的场景那么对于定制性要求更小的场景,因此适合展示较为简单的内容
QD_ANJING
·
2023-12-23 13:37
javascript
vue.js
前端
前端-Vue嵌套
el-dialog
遮罩层BUG(置灰)
问题1:嵌套dialog,即打开一个dialog的时候,再打开第二个dialog,此时屏幕会置灰。解法:在最后一个弹窗上面加属性::modal-append-to-body="false"问题2:嵌套dialog,即打开一个dialog的时候,再打开第二个dialog,此时关闭第二个dialog,屏幕会置灰。解法:在最后一个弹窗上面加属性::append-to-body="true"
大嘴史努比
·
2023-12-22 11:31
前端
javascript
开发语言
vue3 composition api使用v-model封装
el-dialog
只贴上精简代码父组件父组件使用v-model绑定子组件,会默认传递一个modelValue变量和update:modelValue方法到子组件子组件...在defineEmits和defineEmits定义modelValue变量和update:modelValue方法vue语法中不应直接修改props(一些旧版本中直接修改是可以正常运行的,但新版本严格限制,直接报错),所以子组件中v-model
永远不会太晚
·
2023-12-20 06:54
vue.js
javascript
前端
vue弹窗:
el-dialog
visible.sync触发父组件的update事件
在使用element-ui中的dialog组件时,发现visible属性在使用时需要添加.sync才生效。我们先自己创建一个dialog组件,如下当我们点击关闭按钮时,会发生警告原因就是在VUE中,prop的传递是单向下行绑定的,也就是说只能父传给子,不能反过来。虽然在demo中子组件直接修改visible也能够关闭窗口,但是该变量不能传给父组件,所以并不建议这么做,(如果您任性,觉得父组件拿到这
一木难求
·
2023-12-19 15:16
Vue前端开发
vue.js
javascript
html
【前端学习记录】
el-dialog
弹窗点击确定按钮关闭弹窗时的执行逻辑
根据element文档可知,当对话框关闭时会执行close方法,我们可以在@close方法中加上对应的处理逻辑。因此在使用时需要注意以下几点:当确定和取消按钮的业务逻辑不一致时,我们将取消(点击右上角的x)的逻辑写在before-close的方法中当确定和取消按钮的业务逻辑一致时,我们将取消(点击右上角的x)的逻辑可以写在close方法中
Note_creek
·
2023-12-17 19:03
前端
学习
前端
vue
element组件拖动效果,仅供备份参考!
首先我们将新建一个js文件dialog.js放在项目的对应位置,将下面代码复制到文件中;其次我们要在main.js文件中引入该js文件;在其他vue文件中使用可拖动的
el-dialog
;二、效果展示1.
【南汐】前端
·
2023-12-16 08:37
vue.js
javascript
前端
element-plus:
el-Dialog
对话框组件垂直居中、禁止屏幕滚动、使用内滚动
app.vuestyle部分添加以下内容:.
el-dialog
{display:flex!important;flex-direction:column!important;margin:0!
哥很冷漠
·
2023-12-16 03:44
vue.js
javascript
ecmascript
vue3封装
el-dialog
组件
保存提交取消保存import{defineProps,ref,defineEmits,watch}from'vue';constemits=defineEmits(['save','cancellation','open','close']);constprops=defineProps({visible:{//模态框显示隐藏type:Boolean,default:false},dialogTi
会飞的鱼—
·
2023-12-15 17:10
vue.js
javascript
elementui
vue3父组件调用子组件
el-dialog
对话框
vue3父组件调用子组件
el-dialog
对话框在写项目的时候,经常要使用父子组件通讯,我已经写了很多篇博客来介绍父子组件通讯了,vue中的父子组件通讯方式有差不多10来种,最常用的就那么一两种,这里我介绍其中我认为最基础的两种
栀椩
·
2023-12-15 11:24
web开发
vue.js
javascript
前端
element
el-dialog
弹窗可拖动
//创建directives.js文件importVuefrom'vue';//v-dialogDrag:弹窗拖拽Vue.directive('dialogDrag',{bind:function(el){constdialogHeaderEl=el.querySelector('.el-dialog__header');constdragDom=el.querySelector('.el-dia
如_我所愿
·
2023-12-15 09:55
element-plus:
el-Dialog
对话框组件垂直居中、禁止屏幕滚动、使用内滚动
app.vuestyle部分添加以下内容:.
el-dialog
{display:flex!important;flex-direction:column!important;margin:0!
我爱学习yq
·
2023-12-14 22:19
vue.js
javascript
前端
ecmascript
终于搞懂了
el-dialog
属性modal-append-to-body,append-to-body的作用【图解】
最后说重点,为了避免出现遮罩层在最上面挡住了显示层(可能在谷歌浏览没问题,在IE浏览器就会有这个问题),以及被其他定位元素挡住(显示层全屏的时候)比如vue-element-admin左边的菜单和上面的头)(这个问题只有IE浏览器才会出现,而且是每次登录进来才会有这个问题,刷新一下又好了)。通过加append-to-body属性解决以上所有问题
虚心若愚求知若渴
·
2023-12-14 17:46
前端
vue.js
dialog打开时重新渲染
在Vue中打开dialog常用的方法是使用
el-dialog
控件。当dialog打开时,常常需要重新渲染对应的内容。这个功能可以通过监听visible属性实现。
Y2000104
·
2023-12-14 14:06
vue.js
前端
javascript
el-dialog
destroy-on-close的坑(关闭弹窗时触发了子组件的mounted)
表现:设置了destroy-on-close为true的一个
el-dialog
,在关闭时候,触发了子组件的mounted。
帅比九日
·
2023-12-14 14:50
踩过的坑
前端
element
【若依框架实现上传文件组件】
若依框架中只有个人中心有上传图片组件,但是这个组件不适用于
el-dialog
中的el-form表单页面于是通过elementui重新写了一个上传组件,如图是实现效果vue代码选择文件确定取消js代码import
青莳吖
·
2023-12-05 14:53
vue.js
前端
javascript
elementui
两种方法解决elementui的
el-dialog
移动端中使用百分比显示问题,自适应(响应式)
document.body.clientWidth设置width结语前言处理之后的效果:一、借助css3的媒体查询@mediascreenand(min-width:220px)and(max-width:600px){.
el-dialog
codernmx
·
2023-12-05 10:51
Element
elementui
vue.js
javascript
el-tree 在
el-dialog
显示时 重新加载 el-tree (el-tree采用懒加载)
原本的el-tree组件在执行完树节点的懒加载后就不会触发load若想重新加载需要拿到树的根节点然后清空子树重新调用load的请求函数请自行参考官方文档,只展示关键部分if(node.level===0){this.node_had=node//保存根节点this.resolve_had=resolve...在需要重载的地方,添加如下代码if(this.node_had){this.node_ha
海胆Sur
·
2023-12-01 22:39
web前端
vue.js
javascript
Vue3通过v-model绑定
el-dialog
组件
本文将实现通过v-model实现
el-dialog
组件的显隐一般来说弹窗组件是单独抽离成组件放在components中方便代码阅读一.通过绑定子组件ref来操作弹窗的布尔值父组件ref点击弹出constmodelDialogs
月色真美121
·
2023-12-01 17:07
vue.js
javascript
前端
Vue中使用Element-ui form和
el-dialog
进行自定义表单校验&清除表单状态
在日常后台管理的开发中会需要对用户输入的数据进行校验,结合element提供的弹窗来进行实际操作校验用户输入&清除表单的状态新增取消确定需要注意的时el-form的绑定值要和rules中写的校验需要一致,否则会导致不生效下拉选择的触发trigger需要使用change还有就是规则写完后要检查一下el-form-item有没有加上prop本人多次忘记加了导致看不到号排查了好久哈哈rules:{nam
月色真美121
·
2023-12-01 17:36
vue.js
javascript
ui
elementui
vue中实现element-UI的
el-dialog
拖拽
感谢网友的分享实现在vue中element-ui的
el-dialog
弹框拖拽!
知足常乐晨
·
2023-12-01 02:48
element-plus
el-dialog
弹窗隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作等
场景
el-dialog
隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作,比如一个弹窗打开了,我要能控制弹窗后面的滚动、点击等等一系列事件。
努力挣钱的小鑫
·
2023-11-30 07:44
Element
vue.js
前端
javascript
ant-design组件a-modal对话框两条横线
因为element-ui的
el-dialog
不好实现对话框垂直居中,所以使用ant-design带centered属性可实现居中但是a-modal会有两条上下的横线、如下图:image-20211015182137559
只管挖坑不管埋
·
2023-11-29 13:31
dialog打开时重新渲染
在Vue中打开dialog常用的方法是使用
el-dialog
控件。当dialog打开时,常常需要重新渲染对应的内容。这个功能可以通过监听visible属性实现。
大可-
·
2023-11-29 09:06
vue.js
前端
javascript
VUE 实现 生成二维码,并支持点击按钮下载
代码的是基于我们自己的一个web项目的,所以,我只贴出关键的地方来,这不是新手教学,有一定基础的道友会秒懂的二维码是显示在
el-dialog
上的:tempate的代码片段:我的二维码
Gyk-gyk
·
2023-11-29 00:08
vue
vue.js
javascript
[element-ui]
el-dialog
中的内容没有预先加载,因此无法获得内部元素的ref 的解决方案
$refs.xxxx无法获取
el-dialog
中的内部元素,这个问题会导致很多bug.官方解释,在open事件回调中进行,但是open()是弹窗打开时候的会调,有可能在此处获取的时候,还没有渲染成功,导致依然获取不了
533_
·
2023-11-26 11:08
element-ui
ui
vue.js
前端
el-dialog
的各种正确使用姿势 以及
el-dialog
destroy-on-close 无效的解决办法
在使用elementUI的弹窗插件
el-dialog
时,因为每次打开必须要重新渲染里面的内容,所以使用了destroy-on-close属性,发现并没有用:弹窗内容,这里省略一万行。。。
jingqw
·
2023-11-26 02:47
element-ui
vue
vue.js
elementui
【element优化经验】
el-dialog
修改title样式
目录前言解决之路1.把默认的×这个图标隐藏,官方的api有这个属性:showClose值设置false.2.title插槽定制:左边定制标题,右边定制按钮区域。3.背景颜色修改:默认title是有padding的需要把它重写调,然后加上背景颜色。总结编辑以上就是今天的分享,欢迎关注我,点赞评论!~前言近日,做需求遇到UI要求改造弹框的样式,默认的样式标题+关闭的X无法满足要求。UI设计的是:和产品
啥咕啦呛
·
2023-11-26 00:27
CSS
vue.js
前端
javascript
Vue3+element-plus,打包报错:Cannot read properties of null (reading ‘insertBefore‘)
一、现象:vue3+element-plus项目,本地启动时,页面所有操作都正常;部署到生产环境后,
el-dialog
、el-drawer弹框报错。
南方姑娘-qing
·
2023-11-25 08:01
前端
前端
element-plus
TypeError: Cannot read properties of null (reading ‘insertBefore‘) vue项目报错
解决方案:v-show替换v-if2、
el-dialog
组件导致默认弹框是关闭的
前端大灰狼
·
2023-11-24 11:28
vue.js
前端
javascript
element plus 使用细节
文章目录table表格自定义内容select显示的是valueupload使用——一个文件(多个文件可以借鉴)
el-dialog
使用一定要用一个参数接收defineProps不要再
el-dialog
上加
PBitW
·
2023-11-24 08:54
vue3
table自定义内容
select显示数字
upload使用模板
vue3封装dialog组件
element-ui框架的
el-dialog
弹出框被遮罩层挡住了,vue-element-ui弹出框和el-select层级混乱
图是在网上找的遇到这种情况不要慌,可以在
el-dialog
标签里添加::modal-append-t
拳击俱乐部
·
2023-11-22 21:00
element
el-dialog
el-select
css
css3
vue.js
html5
javascript
上一页
1
2
3
4
5
6
7
8
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他