el-dialog

解决Element中的el-dialog在第一次使用后无法再次触发mounted的问题

现象：el-dialog组件在第一次使用的时候没有问题，mounted也可以触发，但是关闭dialog后再次弹出就不再走mounted，导致可能没有办法及时获取到新的数据。
许洪昌·2020-06-24 08:48

Vue+Element 用同一个el-dialog弹框完成新增和编辑操作

但el-dialog弹框的visible.sync设置显示和隐藏往往带来很多额外的工作：处理数据的变更，带校验表单的内容移除和校验清除等这需要我们在各种隐藏的bug里耗费很多精力，处理难度会随着表单内容复杂程度的增加不断提高
辣姐什么鬼·2020-06-24 05:49

最佳实践：vue弹窗及滑块响应式

下述为项目中弹窗/滑块统一处理方式汇总（下述已el-dialog为例）演示环境：https://eugvd.csb.app/Demo地址：https://codesandbox.io/s/thirsty-sun-eugvd
奋飛·2020-06-24 04:32

el-dialog拖动

1.drag.jsimportVuefrom'vue';/**使用方法*将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；*给elementUI的dialog上加上v-dialogDrag指令就可以实现弹窗的全屏和拉伸了。*给dialog设置:close-on-click-modal="false",禁止点击遮罩层关闭弹出层*如果是form表单，不要将提交等按钮放
juceli·2020-06-23 23:37

el-dialog关闭后重置数据方法、注意事项

1.需求在使用element的对话框el-dialog过程中，需求需要el-dialog在没有保存并且输入框发生修改的情况下，在关闭窗口的时候将el-dialog中的el-form表单数据进行重置。
fufu_good·2020-06-23 09:01

自定义vue指令使elementUI的el-dialog弹窗可全屏和拉伸

importVuefrom'vue';/**定义公共js里，在入口文件main.js中import；*给elementUI的dialog上加上v-dialogDrag指令就可以实现弹窗的全屏和拉伸了。*///v-dialogDrag:弹窗拖拽+水平方向伸缩Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){//弹框可拉伸最小宽高l
尔嵘·2020-06-22 08:58

在element ui中有关对话框el-dialog关闭事件（详细教程）

2019独角兽企业重金招聘Python工程师标准>>>下面我就为大家分享一篇elementui对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。
weixin_33949359·2020-06-21 11:37

vue使用el-dialog关闭后重置数据的最佳方法

此方法试用所有需要重置数据的场景el-dialog打开一次之后，再次打开之前的数据不会销毁，依然存在。我们需要在关闭后重新初始化数据。重置表单的方法this.
weixin_33701617·2020-06-21 10:55

$confirm 和el-dialog 弹出框 移动

公司的elementUI的Dialog需要能移动,原生的不能移动,自己就开发了一个,大家复制代码到html里面就可以直接运行了.调试了好久,还能凑合用Title#appLoading{width:100%;height:100%;}#appLoadingspan{position:absolute;display:block;font-size:50px;line-height:50px;top:
```...简单点·2020-06-16 21:00

14 el-dialog 基本结构

1dialogVisible父组件提供，:visible.sync直接修改父组件的dialogVisible，会报错，需要加上before-close属性这是一段信息取消确定exportdefault{name:"InfoIndexDialog",props:{dialogVisible:{type:Boolean,required:true}},data(){return{};},methods
章画·2020-06-15 10:00

一次简单的Vue项目

el-dialog按照官网上引入这个组件时出现了很多问题，我们还是来详细地
Prejudice_ccca·2020-04-13 16:47

vue element-ui el-dialog组件的一些坑

问题1：如果弹窗点击外面不让窗口关闭在el-dialog标签里加上:close-on-click-modal="false"(默认是可以关闭的)问题2：有时候发现组件套多了，弹窗的遮罩层的层级在弹窗之上
一只喵de旅行·2020-03-26 17:20

vue使用el-dialog关闭后重置数据的最佳方法

此方法试用所有需要重置数据的场景el-dialog打开一次之后，再次打开之前的数据不会销毁，依然存在。我们需要在关闭后重新初始化数据。重置表单的方法this.
liunewshine·2020-02-18 05:15

el-dialog销毁

问题描述使用弹出框时，数据不会根据点击不同而实时更新，一直都会是第一次点击显示弹出框时的数据，这时就需要在弹出框关闭时销毁。v-if控制取消确定
Kalinda Sharma·2020-01-16 11:55

Vue dialog嵌套组件，在弹窗每次打开都加载上一次的缓存

1.解决方法在dialog外套一层div，div中以v-if来控制组件el-dialog的出现与否，每次弹出el-dialog，都会执行mounted，而不加div，只会执行一次。2.具体代码
diligentwhp·2020-01-08 17:51

（一）sync分析之为啥el-dialog中的visible需要使用.sync

首先，笔者在使用element-ui中的dialog组件时，发现visible属性在使用时需要添加.sync才生效，心中好奇，所以研究一下原理我们先自己创建一个dialog组件，如下当我们点击关闭按钮时，会发生警告原因就是在VUE中，prop的传递是单向下行绑定的，也就是说只能父传给子，不能反过来。虽然在demo中子组件直接修改visible也能够关闭窗口，但是该变量不能传给父组件，所以并不建议这
卫子鱼·2019-12-09 17:00

el-dialog 拖拽及居中效果

博客地址：http://www.globm.top/blog/1/detail/35el-dialog拖拽及改变大小1.新建directive.jsimportVuefrom'vue';只能在窗口内拖拽//v-dialogDrag:弹窗拖拽Vue.directive('dialogDrag',{bind(el){//备注：可以改变类名使其它元素也实现拖拽效果//鼠标点击拖拽区域constdialo
萝卜砸大坑·2019-11-28 16:04

解决vue和el-dialog的遮罩层消失

一、解决vue和elementUI中对话框的遮罩层消失，在el-dialog标签里添加:modal-append-to-body=‘false’错误分析1）若el-dialog弹出框设置了modal-append-to-body
非渔驿站·2019-11-04 11:08

vue+element-ui el-dialog嵌套table组件，ref问题,toggleRowSelection的undefined

项目需求，返回数据的时候，el-dialog弹窗里面的table组件需要设置默认选中。
LLL_LH·2019-09-05 16:18

element ui的双层el-dialog样式控制

关键代码如下：……{{deptBox.parentName}}问题描述如下：通过设置.dept.el-dialog样式修改对话框样式，但是第二层对话框样式未正常设置，与第一层不一致。原因：第二层dialog挂载到了body下，不在.dept样式控制下。查询官方资料：append-to-body，Dialog自身是否插入至body元素上。嵌套的Dialog必须指定该属性并赋值为true。但是实验证明
Beam007·2019-08-30 16:28

加载el-dialog中的子组件

在使用element-ui开发项目的过程中，使用el-dialog的时候很多，简单的使用想必都没有问题，但是涉及到复杂的应用时，就容易想错方向，从而走很多弯路了。
奥特蛋_mm·2019-08-30 10:23

vue el-dialog 对话框的实现

今天在项目中用到了ElementUI的组件：Dialog对话框，所以就总结一下~布局是酱紫的：{{$t('permission.cancel')}}{{$t('permission.confirm')}}页面两个按钮“新增”和“编辑”都会打开这个对话框，所以:title=“dialogType===‘edit’?‘EditRole’:‘NewRole’”用来判断是新增还是编辑，从而改变对话框的标题
＊且听风吟·2019-08-09 17:32

解决el-dialog使用时无法正常弹出的问题

在使用el-dialog,发现无论怎么做,该对话框也无法显示,前端也没有报错.点击按钮时,发现遮罩层已经出来了,但对话框没有显示.经查,缺少属性append-to-body,将该值设置为true即可增加该属性
爱余星痕·2019-07-21 19:21

解决el-dialog使用时无法正常弹出的问题

在使用el-dialog,发现无论怎么做,该对话框也无法显示,前端也没有报错.点击按钮时,发现遮罩层已经出来了,但对话框没有显示.经查,缺少属性append-to-body,将该值设置为true即可增加该属性
爱余星痕·2019-07-21 19:21

$confirm 和el-dialog 弹出框 移动 示例demo

调试了好久,还能凑合用,请直接看DOME示例,复制就能用:Title#appLoading{width:100%;height:100%;}#appLoadingspan{position:absolute;display:block;font-size:50px;line-height:50px;top:50%;left:50%;width:200px;height:100px;-webkit-
```...简单点·2019-07-03 10:22

$confirm 和el-dialog 弹出框 移动

调试了好久,还能凑合用,请直接看DOME示例,复制就能用:Title#appLoading{width:100%;height:100%;}#appLoadingspan{position:absolute;display:block;font-size:50px;line-height:50px;top:50%;left:50%;width:200px;height:100px;-webkit-
```...简单点·2019-07-03 08:00

el-dialog模态框点击空白不消失

设置属性:close-on-click-modal=“false”
土豆逆袭la·2019-06-28 14:13

Element,el-dialog弹出层拖拽及拉伸、双击全屏

1.1.ie拖动有问题importVuefrom'vue';/**使用方法*将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；*给elementUI的dialog上加上v-dialogDrag指令就可以实现弹窗的全屏和拉伸了。*给dialog设置:close-on-click-modal="false",禁止点击遮罩层关闭弹出层*如果是form表单，不要将提交等按
diaojw090·2019-05-15 11:07

element ui dialog custom-class不生效

自己记录一下：最近使用el-dialog中的custom-class，修改发现样式不生效图中可以看出页面已经渲染出设置的custom-class类，但是实际上样式并没有生效左图为页面渲染，右图为自定义类名解决办法
柠檬茶好喝·2019-05-08 17:35

element-ui中的 slot 插槽

name为footer里面的el-button会插入到组件el-dialog中footer的地方。
Akatsuki233·2019-04-16 19:40

Vue+elementUi使用el-dialog弹框

使用elementUi组件库首先将子组件引入父组件中并且下放也要import进来：还要在components中注册子组件，并且在props中添加如下图：新增watch方法监听；其中的restData(){}是自己定义的在每次关闭弹框时重置弹框中数据的方法，此外return中先将copyEmployeeVisible置为false即默认不展示：当然父页面中其他地方需要触发弹出或者关闭弹框时只需要改变
L_WalkingPig·2019-03-22 17:39

覆盖（优化效果）el-dialog 的显示隐藏动画

element-uidialog本身的动画效果基本就是没动画效果（摊手）原来的弹窗动画优化后的动画只需加入以下这段css代码，非常简单.el-dialog__wrapper{transition-duration:0.3s;}.dialog-fade-enter-active{animation:none!important;}.dialog-fade-leave-active{transitio
is_duke·2019-03-21 17:18

修改elemet-ui组件的内部样式

实例：修改el-dialog的el-dialog__body的样式如果我们使用了element-ui的el-dialog组件，面临修改组件内的样式（例如修改el-dialog__body的样式）的需求，
jw2268136570·2019-03-19 16:18

elementui el-dialog的一个小坑

确定取消elemetuidialog弹出框表单里面有一个input框,给他绑定一个鼠标监听回车事件,默认会去刷新整个父级页面,因为el-form里面只有一个el-input的时候,就会去刷新整个父级页面,解决办法,在form里面加一个就不会刷新父页面了确定取消
lj872224·2019-03-13 14:22

VueJs中的el-dialog的坑[1]

VueJs中的el-dialog的坑[1]需要实现的功能1.直接从页面A到页面C2.从页面A到页面B3.再从页面B跳转到页面C需要实现的功能假设有三个页面A,B和页面C，我们有这样一个需求，可以从页面A
u014028392·2019-03-12 17:44

Element-UI 在使用 el-dialog 中使用 this.$refs.tree 获取组件报错

使用element-ui的el-dialog时，使用this.$refs.tree获取el-tree报错：取消保存这样直接在dialog弹出时直接使用this.$refs.tree是获取不到的。
随遇而安、1314·2019-02-25 22:52

vue引用vue-ueditor-wrap组件，一个页面要多次渲染UEditor编辑器时，v-mode绑定失效，v-mode值改变编辑器内容不改变解决方式

**vue引用vue-ueditor-wrap组件，一个页面要多次渲染UEditor编辑器时，v-mode绑定失效解决方式**博主ueditor编辑器使用情况是在一个el-dialog弹出框里，每次打开都要渲染不同的数据
一块废土·2019-02-22 11:51

el-dialog 及其封装、使用

src/views/oms/pickAddress/Index.vueel-diolog弹框：src/views/oms/pickAddress/DialogAddress.vue-->是否取消保存import{dotData,copy,confirm}from'@/utils'importCascadeAddressfrom'@/components/CascadeAddress'import{
一波又起·2019-02-12 17:09

用vue element-UI写 el-dialog弹窗

style部份.el-dialog__headerbtn{opacity:0;}设置弹窗的X号div部份JS部份data{dialogVisible:false}使用的时候调用方法为true即可methods:{login(){this.dialogVisible=true}}
undefined汪少·2019-01-10 14:30

el-dialog vue弹窗播放视频video

主要代码如下：播放mounted(){this.$refs.btn.onclik(function(){if(this.$refs.dialogVideo.paused){this.$refs.dialogVideo.play();}else{this.$refs.dialogVideo.pause();}});},methods:{//视频播放playVideo(row){this.dialog
蒋蒋蒋ing·2019-01-03 18:44

el-dialog

这是一段信息-->取消确定import"css/achievementAnalysis/unit/dialog.css";exportdefault{name:"",props:{msg1:{type:Boolean,default:false},msg2:{type:String,default:""}},data(){return{dialogVisible:false,dialogTitle
asmuzi·2018-12-13 15:41

vue+elementui自定义Dialog组件之登录弹框话框实现(实现不同vue组件关联)

elementui提供一个可实现弹框的组件el-dialog,一般会将弹框写在一个vue文件，通过el-dialog套用类似于这种登录取消登录一般不会造成问题，但是写在同一个vue界面，代码比较臃肿，下面演示一下写在不同的
Mr_Debugger·2018-09-30 12:40

element-ui在使用el-dialog弹出一个有页码的页面时，页码出现的问题

有两页。我点击查看第二页的话下次再打开同一个弹窗，它显示的还是第二页的内容。并且我打开其他的弹窗他给后台的页面竟然也是2.。。导致数据出错。所以在点击页面切换内容的时候我们就需要处理一下，并且点击弹窗的时候也要把页面从新变成1.下面标红的就是我加上的。close(){this.itemPage=1;},getDicItemLists(type=0){//获取条目内容if(type==0){this
夏天想·2018-08-22 18:26

element ui 对话框el-dialog打开事件

通过循环，清空上一次操作赋给对象的值//清空对象数据openDialog(obj){for(varkeyinobj){obj[key]=null}},
SunnyLjs·2018-07-05 18:26

element-ui框架的el-dialog弹出框被遮罩层挡住了

如图：解决办法在el-dialog标签里添加:modal-append-to-body='false'实现效果：问题解析先来看看element-ui官网提供的属性说明文档文档解释：翻译成大白话就是，若el-dialog
蔚莱先森·2018-07-02 19:30

【element-ui】el-dialog中使用el-select，下拉列表被挡住的解决办法

一开始以为没获取到列表数据，后来发现有，只是下拉列表被模态框挡住了，定位到每次鼠标经过打开dialog的按钮时，dialog的层级都会递增；后来找到element-ui中的源码的这一行：发现这样dialog的层级就不会递增了（固定在2000），列表也能正常展示了。但是不确定会不会对其他组件造成影响，目前还没发下，如果有问题再来更新。这句代码的路径：
游走走·2018-05-24 19:30

vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选，默认选中

el-dialog代码块：打开dialog确定这样直接在opendialog方法中直接使用this.$refs.table是获取不到的，那么怎么获取呢？
溱rr洧·2018-01-11 16:51

关于el-dialog，我更推荐的用法

最近的项目里用上了vue和element-ui。vue这种轻量级渐进式框架的舒适自不必说，但一直困扰着我的，是如何方便又优雅的弹出模态dialog...对于我这种在jquery出现之前就用document.getElementById敲代码的老顽固来说，我始终不能完全接受把dialog在编码期就写入模板的方式，下面是尤大在知乎某个相关问题的回答节选（全文请看https://www.zhihu.co
明年我18·2017-10-07 11:00

vue多种弹框的弹出形式的示例代码

但是el-dialog中的body部分不会被加载（不管有没有加v-if指令）；dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框，但此时只有dlBlankAdd会被加载，
小被子·2017-09-18 11:27
上一页 4 5 6 7 8 9 10 11 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他