对element的dialog对话框进行二次封装

前端烂笔头

已于 2022-05-29 17:19:09 修改

阅读量728

点赞数

文章标签： vue.js javascript elementui

于 2022-05-22 23:33:32 首次发布

本文链接：https://blog.csdn.net/qq_45846359/article/details/124918659

版权

本文介绍如何对Element UI的Dialog对话框进行二次封装，分别从子组件和父组件的角度阐述封装过程，提升组件复用性和灵活性。

摘要由CSDN通过智能技术生成

子组件

<template>
	<div>
		<el-dialog :title="dialogTitle" :visible.sync="visible" :before-close="cancel">
			<slot>
				<p>弹框自定义的内容</p>
			</slot>
			<span slot="footer" class="dialog-footer">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端烂笔头

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Element Dialog对话框的使用示例

10-15

`methods`中的`handleClose`展示了如何在关闭对话框前进行确认操作，使用了`$confirm`弹窗进行二次确认。 ### 属性和选项 Element Dialog有许多可配置的属性，比如`width`用于设置对话框的宽度，`modal`（默认为`...

elementui dialogfooter固定在底部（粘性定位）

HUANGRUI的博客

07-31

6213

css粘性定位，footer固定在底部

参与评论您还未登录，请先登录后发表或查看评论

封装dialog的组件（对elementui的el-dialog的二次封装）

热门推荐

weixin_46419373的博客

11-20

1万+

今天来说下对elementui的el-dialog对话框进行二次封装。那我为什么要进行封装呢？我来说一下：我们平常在写一个项目的时候，需要用到弹框非常多，如果我们每个页面写一次，会显得代码很累赘，那么对他们进行封装，就减少了代码的复用性。先看一下效果最终的效果就是上面的图片下面上代码并解释我一般都是使用的vue父传子props **** 如果对vue的基础不太好的，可以参考：关于组件传值的讲解这个页面是子组件 <template>  .

element的Dialog的二次封装

weixin_69174819的博客

07-02

406

将原来的显示的绑定和触发事件的方式，改为了用. Vue的 .syncDialog.vue。

如何对element弹窗进行二次封装

greed

11-11

1208

通过$refs打开的同时还能给弹窗组件传参一些框架使用的也是这种方式。

vue2.x 二次封装element ui 中的el-dialog

Cheris_LT的博客

10-31

956

这次试试新的写法，由于props是单向数据流，所以这里选择使用computed，在父组件改变值的时候，对应的dialog就会相应的改变状态。剩下的就是在dialog关闭的时候，需要通知父组件状态的变化。之前有尝试过使用watch去监听props的值，是可以做到想到的效果，但是代码稍微有一些冗余。在做后台管理系统的时候，dialog组件是我们使用频率比较高的组件，但是有一些需求现有的组件是不满足的。组件本身的属性我们保留，只需要根据需求添加，然后在使用的时候props去拿取使用就可以了。

element ui 对话框el-dialog关闭事件详解

01-21

通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 ...以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue3 + element plus + ts , 饿了么对话框组件二次封装

02-22

先来有事 , 赶紧封装不是两个源自饿了么的对话框组件 , 主要是比较麻烦 , 你随便看看 , 反正不收积分 , 文章在这里 , 赶紧对照着来 ...

基于ElementUI二次封装弹窗组件

前端开发工程师

12-29

1690

组件封装是一个很常规的操作。随着时间的积累，组件也会越来越多，配合vuepress可以解决组件文档的统一化，但依然解决不了组件的跨项目复用问题。一个公司中不可能只基于一个框架或项目开发，不同的业务或模块会另起项目，这时，如果是把项目的复用组件通过复制的方式引入另一项目，就显得麻烦，而且如果组件升级或修复bug，不能实时同步。如何解决组件的跨项目复用，是每个团队都会面临的问题。就常见的就是把组件上传到npm仓库，这样不同的项目需要时直接从npm仓库中安装使用，如果组件升级或修复问题，其他项目同步更新就可以。

el-dialog 底部按钮固定中间部分滚动条滑动

weixin_58414196的博客

09-01

2644

【代码】el-dialog 底部按钮固定中间部分滚动条滑动。

element-ui dialog form 弹框表单组件封装

qq_37309987的博客

05-15

639

产生原因，子组件通过 update 的方式直接修改了 props 传递的属性，解决方法，在子组件中使用一个变量 dialogVisible 接收父组件传递过来的 props 属性 visible，子组件内部 dialog 通过 dialogVisible 这个变量来控制。产生原因，在点击关闭图标和遮罩层关闭时，子组件未更新父组件的 visible 状态，解决方法，在子组件内通过 close 方法，即 dialog 关闭回调函数来更新父组件状态。

vue2封装对话框el-dialog组件

Jolly_zhang的博客

10-18

1758

vue2封装对话框el-dialog组件

dialog组件使用，如何优雅的二次封装dialog组件

tjq11111的博客

04-17

1186

优雅的dialog的二次封装

vue2+elementUi 弹窗二次封装

fengxiaopeng74的博客

06-20

822

【代码】vue2+elementUi 弹窗二次封装。

elementui全局封装Dialog对话框组件

IT_Dilraba_bin的博客

08-10

2570

elementui的dialog弹出框的全局封装，为了更快更加方便的使用elementui的dialog对话框，将对话框进行全局封装

element ui dialog 弹框二次封装

qwyio的博客

03-10

1899

下次会为大家更新form表单的封装，table，pagination,form的封装使用后期能更好的维护代码新建一个dialog文件，下面是封装内容 <template> <div> <el-dialog ref="currentDialog" v-bind="$props" :class="`dialog-${size}`" :close-on-click-modal="closeOnClickModal"

elementui el-dialog 的二次封装