el-dialog

Vue3使用

element列表里面插槽的标签vue3：上下对应，title是自己随便起的名字1、注意，vue3中只能用template,#等同于slot=2、注意，vue3中只能用template,#等同于slot=2、el-dialog
Best_Liu~·2024-01-19 13:47

el-dialog嵌套使用，只显示遮罩层的问题

直接上解决方法我是不建议嵌套使用的，平级也能调用，层级是按点击顺序的这两个方法还是有用的，比如跳转其他页面保留el-dialog显示状态，可以使用如果有用，请给我点赞收藏，我会很开心，谢谢
立哥Sole·2024-01-18 13:13

在el-dialog编辑界面el-upload跳动问题

el-dialog中有子组件el-upload，并且做了只能显示一个文件的限制1.在第一次打开后，关闭dialog，再打开dialog会有跳动这是因为之前打开的dialog中，文件仍旧在，新一次的打开的文件把上一次顶掉了
Frilled Lizard·2024-01-17 16:52

el-form验证问题

1.如果第一次打开el-dialog有验证失败，重新打开el-dialog仍然会有验证失败解决方案：给el-dialog绑定close事件，并调用clearValidate()closedialog()
Frilled Lizard·2024-01-17 14:17

关于element中el-dialog设置append-to-body样式不生效问题

最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性，这样我在下面修改样式就不生效，前端不就玩的个样式吗？如果样式都没用了，还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉，这样的话样式就生效了。这里说另一种方法！！！在assets目录新建一个dialog.css文件，用来修改嵌套的dialog。然后在组件中给他从新命名一个名字在dial
小政爱学习！·2024-01-15 19:25

v-if控制div内容显示，克隆这个div但是v-if没有效果

我子页面有个el-dialog，el-dialog里面有个大的div它的id为app-pre-meet-add，在子页面我通过isPdf来显示我想要的内容。现在我在父页面先通过this.
Rrar·2024-01-15 02:44

elementui dialog 回车时却刷新整个页面

使用el-dialog弹出一个表单，当我无意间敲到回车键时，整个页面被刷新了，又是一脸的懵逼。。。经过查找文档发现解决方案为上述截图标记。。。
zhaocarbon·2024-01-10 07:44

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

前端在el-dialog中嵌套多个el-dialog一、应用场景二、代码实现一、应用场景应用场景：需要点击按钮后弹出第一层对话框，在第一层对话框中填写内容后，再点击确认弹出第二层对话框，且需将第一层填入的内容传递给第二层
Vamp_Piece·2024-01-10 03:21

关于在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

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

关于element-ui中el-tree默认选择节点视图不更新问题的解决方案。

1、问题描述：在使用element-ui和Vue2.0的时候出现了以下问题：上述代码为el-tree的代码，我将el-tree放在了el-dialog中，当我点击不同的el-button时，调用不同的接口
国荃·2024-01-04 02:24

将el-dialog设置为全屏（ :fullscreen=“true“）后还是存在遮罩层和滚动条

解决：将el-dialog的margin设置为0即可.big-box{:deep(.el-dialog){margin:0px!important;}}
₍•ʚ•₎呀呀·2023-12-31 01:56

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

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

实现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

隐藏＜el-dialog＞组件的右上角关闭按钮

你可以通过设置show-close属性为false来隐藏组件的右上角关闭按钮。具体代码如下所示：修改之前：修改之后的效果：
艾特NND·2023-12-25 14:57

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

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

初始写法使用了v-model弹窗不显示{{selectedItemContent}}将v-model改为:visible.sync="dialogVisible"就可以了{{selectedItemContent}}关闭确认但是此时的弹窗在遮罩层底下无法点击关闭我们还需要增加一个配置：:append-to-body="true"{{selectedItemContent}}关闭确认这样就可以啦如图
paradoxaaa_·2023-12-23 14:51

不会封装函数式调用组件？也许你卡在了这里

有些小伙伴可能就简单的封装一个,这种功能也是很完备的缺点：需要引入额外响应式变量，方法去控制优点：像el-dialog一样，适合需要定制性更大的场景那么对于定制性要求更小的场景，因此适合展示较为简单的内容
QD_ANJING·2023-12-23 13:37

前端-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

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弹窗： el-dialog visible.sync触发父组件的update事件

在使用element-ui中的dialog组件时，发现visible属性在使用时需要添加.sync才生效。我们先自己创建一个dialog组件，如下当我们点击关闭按钮时，会发生警告原因就是在VUE中，prop的传递是单向下行绑定的，也就是说只能父传给子，不能反过来。虽然在demo中子组件直接修改visible也能够关闭窗口，但是该变量不能传给父组件，所以并不建议这么做，（如果您任性，觉得父组件拿到这
一木难求·2023-12-19 15:16

【前端学习记录】el-dialog弹窗点击确定按钮关闭弹窗时的执行逻辑

根据element文档可知，当对话框关闭时会执行close方法，我们可以在@close方法中加上对应的处理逻辑。因此在使用时需要注意以下几点：当确定和取消按钮的业务逻辑不一致时，我们将取消(点击右上角的x)的逻辑写在before-close的方法中当确定和取消按钮的业务逻辑一致时，我们将取消(点击右上角的x)的逻辑可以写在close方法中
Note_creek·2023-12-17 19:03

element组件拖动效果，仅供备份参考!

首先我们将新建一个js文件dialog.js放在项目的对应位置，将下面代码复制到文件中；其次我们要在main.js文件中引入该js文件；在其他vue文件中使用可拖动的el-dialog；二、效果展示1.
【南汐】前端·2023-12-16 08:37

element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动

app.vuestyle部分添加以下内容：.el-dialog{display:flex!important;flex-direction:column!important;margin:0!
哥很冷漠·2023-12-16 03:44

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

vue3父组件调用子组件el-dialog对话框

vue3父组件调用子组件el-dialog对话框在写项目的时候，经常要使用父子组件通讯，我已经写了很多篇博客来介绍父子组件通讯了，vue中的父子组件通讯方式有差不多10来种，最常用的就那么一两种，这里我介绍其中我认为最基础的两种
栀椩·2023-12-15 11:24

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

终于搞懂了el-dialog属性modal-append-to-body,append-to-body的作用【图解】

最后说重点，为了避免出现遮罩层在最上面挡住了显示层（可能在谷歌浏览没问题，在IE浏览器就会有这个问题），以及被其他定位元素挡住（显示层全屏的时候）比如vue-element-admin左边的菜单和上面的头）(这个问题只有IE浏览器才会出现，而且是每次登录进来才会有这个问题，刷新一下又好了)。通过加append-to-body属性解决以上所有问题
虚心若愚求知若渴·2023-12-14 17:46

dialog打开时重新渲染

在Vue中打开dialog常用的方法是使用el-dialog控件。当dialog打开时，常常需要重新渲染对应的内容。这个功能可以通过监听visible属性实现。
Y2000104·2023-12-14 14:06

el-dialog destroy-on-close的坑（关闭弹窗时触发了子组件的mounted）

表现：设置了destroy-on-close为true的一个el-dialog，在关闭时候，触发了子组件的mounted。
帅比九日·2023-12-14 14:50

【若依框架实现上传文件组件】

若依框架中只有个人中心有上传图片组件，但是这个组件不适用于el-dialog中的el-form表单页面于是通过elementui重新写了一个上传组件，如图是实现效果vue代码选择文件确定取消js代码import
青莳吖·2023-12-05 14:53

两种方法解决elementui的el-dialog 移动端中使用百分比显示问题，自适应（响应式）

document.body.clientWidth设置width结语前言处理之后的效果：一、借助css3的媒体查询@mediascreenand(min-width:220px)and(max-width:600px){.el-dialog
codernmx·2023-12-05 10:51

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

Vue3通过v-model绑定el-dialog组件

本文将实现通过v-model实现el-dialog组件的显隐一般来说弹窗组件是单独抽离成组件放在components中方便代码阅读一.通过绑定子组件ref来操作弹窗的布尔值父组件ref点击弹出constmodelDialogs
月色真美121·2023-12-01 17:07

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中实现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

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 实现 生成二维码，并支持点击按钮下载

代码的是基于我们自己的一个web项目的，所以，我只贴出关键的地方来，这不是新手教学，有一定基础的道友会秒懂的二维码是显示在el-dialog上的：tempate的代码片段：我的二维码
Gyk-gyk·2023-11-29 00:08

[element-ui] el-dialog 中的内容没有预先加载，因此无法获得内部元素的ref 的解决方案

$refs.xxxx无法获取el-dialog中的内部元素，这个问题会导致很多bug.官方解释，在open事件回调中进行，但是open()是弹窗打开时候的会调，有可能在此处获取的时候，还没有渲染成功，导致依然获取不了
533_·2023-11-26 11:08

el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法

在使用elementUI的弹窗插件el-dialog时，因为每次打开必须要重新渲染里面的内容，所以使用了destroy-on-close属性，发现并没有用：弹窗内容，这里省略一万行。。。
jingqw·2023-11-26 02:47

【element优化经验】el-dialog修改title样式

目录前言解决之路1.把默认的×这个图标隐藏，官方的api有这个属性：showClose值设置false.2.title插槽定制：左边定制标题，右边定制按钮区域。3.背景颜色修改：默认title是有padding的需要把它重写调，然后加上背景颜色。总结编辑以上就是今天的分享，欢迎关注我，点赞评论！~前言近日，做需求遇到UI要求改造弹框的样式，默认的样式标题+关闭的X无法满足要求。UI设计的是：和产品
啥咕啦呛·2023-11-26 00:27

Vue3+element-plus,打包报错：Cannot read properties of null (reading ‘insertBefore‘)

一、现象：vue3+element-plus项目，本地启动时，页面所有操作都正常；部署到生产环境后，el-dialog、el-drawer弹框报错。
南方姑娘-qing·2023-11-25 08:01

TypeError: Cannot read properties of null (reading ‘insertBefore‘) vue项目报错

解决方案：v-show替换v-if2、el-dialog组件导致默认弹框是关闭的
前端大灰狼·2023-11-24 11:28

element plus 使用细节

文章目录table表格自定义内容select显示的是valueupload使用——一个文件（多个文件可以借鉴）el-dialog使用一定要用一个参数接收defineProps不要再el-dialog上加
PBitW·2023-11-24 08:54
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他