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

方式一使用$refs

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

父组件

<template><div><el-button type="text" @click="handleDialogOpen">打开嵌套表单的 Dialog</el-button><Dialog ref="Dialog"></Dialog></div>
</template><script>
import Dialog from '@/components/Dialog.vue'
export default {components: {Dialog},data() {return {}},methods: {handleDialogOpen() {this.$refs.Dialog.open('打开弹窗')}},mounted() {}
}
</script><style lang="less" scoped></style>

子组件

<template><el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div>
</el-dialog>
</template><script>
export default {data () {return {dialogFormVisible: false,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'}},methods: {open(value) {console.log(value, '父组件传递过来的值')this.dialogFormVisible = true}}
}
</script><style lang="scss" scoped></style>

方式二 封装弹窗内的内容 弹窗组件直接放在父组件中

父组件

<template><div><el-button type="text" @click="handleDialogOpen">打开嵌套表单的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogFormVisible"><dialogForm/></el-dialog></div>
</template><script>
import dialogForm from '@/components/form.vue'
export default {components: {dialogForm},data() {return {dialogFormVisible: false}},methods: {handleDialogOpen() {this.dialogFormVisible = true}},mounted() {}
}
</script><style lang="less" scoped></style>

子组件

<template><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form>
</template><script>
export default {data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'}},methods: {open(value) {console.log(value, '父组件传递过来的值')this.dialogFormVisible = true}}
}
</script><style lang="scss" scoped></style>

其他方式可自行探索

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

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

相关文章

Aspose.OCR for .NET 2023Crack

Aspose.OCR for .NET 2023Crack 为.NET在图片上播放OCR使所有用户和程序员都可以从特定的图像片段中提取文本和相关的细节&#xff0c;如字体、设计以及书写位置。这一特定属性为OCR的性能及其在扫描遵循排列的记录时的功能提供了动力。OCR的库使用一条线甚至几条线来处理这些特…

19 异步通知

一、异步通知 1. 异步通知简介 阻塞和非阻塞两种方式都是需要应用程序去主动查询设备的使用情况。 异步通知类似于驱动可以主动报告自己可以访问&#xff0c;应用程序获取信号后会从驱动设备中读取或写入数据。 异步通知最核心的就是信号&#xff1a; #define SIGHUP 1 /* 终…

[工业自动化-14]:西门子S7-15xxx编程 - 软件编程 - STEP7 TIA博途是全集成自动化软件TIA portal快速入门

目录 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 1.2 软件常用界面 1.3 软件安装的电脑硬件要求 1.4 入口 1.5 主界面 二、PLC软件编程包含哪些内容 2.1 概述 2.2 电机运动控制 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 Siemens …

hutool ExcelUtil导出excel二级表头

简介&#xff1a;Hutool是一款十分好用的开发工具集&#xff0c;里面包含了大部分日常开发常用的工具&#xff0c;使用简单方便&#xff0c;可以大大提升日常开发效率&#xff0c;十分推荐大家使用。这里简单总结一下基于Hutool的Excel使用。 一、Hutool依赖 <!-- Excel导出…

openssl研发之base64编解码实例

一、base64编码介绍 Base64编码是一种将二进制数据转换成ASCII字符的编码方式。它主要用于在文本协议中传输二进制数据&#xff0c;例如电子邮件的附件、XML文档、JSON数据等。 Base64编码的特点如下&#xff1a; 字符集&#xff1a; Base64编码使用64个字符来表示二进制数据…

高教社杯数模竞赛特辑论文篇-2023年B题:多波束测线布设(附获奖论文及MATLAB代码实现)(续)

目录 5.3.3 模拟退火对测线布设仿真检验 5.3.4 开角、坡度的灵敏度分析

SparkSQL语法优化

SparkSQL在整个执行计划处理的过程中&#xff0c;使用了Catalyst 优化器。 1 基于RBO的优化 在Spark 3.0 版本中&#xff0c;Catalyst 总共有 81 条优化规则&#xff08;Rules&#xff09;&#xff0c;分成 27 组&#xff08;Batches&#xff09;&#xff0c;其中有些规则会被归…

【Kubernetes】自建Kubernetes集群完全指南(含云主机公网部署方案)

这篇文章也可以在我的博客中查看 说在前面 本文介绍如何使用Kubeadm在自己的服务器上将Kubernetes应用部署为生产环境&#xff0c;而不使用Kuberentes云服务商。 在进行之前&#xff0c;我建议你先保持理智&#xff0c;问自己为什么需要这么做&#xff1a; 你正在学习Kuber…

elasticsearch分词器

内置分词器 Standard Analyzer - 默认分词器&#xff0c;英文按单词词切分&#xff0c;并小写处理Simple Analyzer - 按照单词切分(符号被过滤), 小写处理Stop Analyzer - 小写处理&#xff0c;停用词过滤(the,a,is)Whitespace Analyzer - 按照空格切分&#xff0c;不转小写Ke…

设计模式详解(十)——装饰器模式

装饰器模式简介 装饰器模式定义 从代码层面而言&#xff0c;是对类的一个扩展或者是修饰&#xff0c;从传统方法而言&#xff0c;我们可以使用继承来对某一个类进行扩展&#xff0c;但是往往会导致会出现非常多的子类&#xff0c;如果我们要想避免这种情况&#xff0c;那么我们…

深入理解 Django 单元测试

在现代软件开发流程中&#xff0c;单元测试是确保代码质量和可维护性的关键组成部分。对于使用 Django 框架的项目来说&#xff0c;Django 提供了一套强大的测试工具来帮助开发者编写和运行单元测试。本文将深入探讨 Django 中的单元测试&#xff0c;包括测试原理、编写测试用例…

uniapp——项目02

分类 创建cate分支 渲染分类页面的基本结构 效果页面,包含左右两个滑动区. 利用提供的api获取当前设备的信息。用来计算窗口高度。可食用高度就是屏幕高度减去上下导航栏的高度。 最终效果: 每一个激活项都特殊背景色&#xff0c;又在尾部加了个红条一样的东西。 export d…

python3GUI--QQ音乐By:PyQt5(附下载地址)

文章目录 一&#xff0e;前言二&#xff0e;展示0.播放页1.主界面1.精选2.有声电台3.排行4.歌手5.歌单 2.推荐3.视频1.视频2.分类3.视频分类 4.雷达5.我喜欢1.歌曲2.歌手 6.本地&下载7.最近播放8.歌单1.一般歌单2.自建歌单3.排行榜 9.其他1.搜索词推荐2.搜索结果 三&#x…

ElasticSearch7.x - HTTP 操作 - 文档操作

创建文档(添加数据) 索引已经创建好了,接下来我们来创建文档,并添加数据。这里的文档可以类比为关系型数 据库中的表数据,添加的数据格式为 JSON 格式 向 ES 服务器发 POST 请求 :http://192.168.254.101:9200/shopping/_doc 请求体内容为: {"title":"小…

智慧城市建设解决方案分享【完整】

文章目录 第1章 前言第2章 智慧城市建设的背景2.1 智慧城市的发展现状2.2 智慧城市的发展趋势 第3章 智慧城市“十二五”规划要点3.1 国民经济和社会发展“十二五”规划要点3.2 “十二五”信息化发展规划要点 第4章 大数据&#xff1a;智慧城市的智慧引擎4.1 大数据技术—智慧城…

智慧城市照明为城市节能降耗提供支持继电器开关钡铼S270

智慧城市照明&#xff1a;为城市节能降耗提供支持——以钡铼技术S270继电器开关为例 随着城市化进程的加速&#xff0c;城市照明系统的需求也日益增长。与此同时&#xff0c;能源消耗和环境污染问题日益严重&#xff0c;使得城市照明的节能减排成为重要议题。智慧城市照明系统…

Linux技能篇-yum源搭建(本地源和公网源)

文章目录 前言一、yum源是什么&#xff1f;二、使用镜像搭建本地yum源1.搭建临时仓库第一步&#xff1a;挂载系统ios镜像到虚拟机第二步&#xff1a;在操作系统中挂载镜像第三步&#xff1a;修改yum源配置文件 2.搭建本地仓库第一步&#xff1a;搭建临时yum源来安装httpd并做文…

javaEE案例,前后端交互,计算机和用户登录

加法计算机,前端的代码如下 : 浏览器访问的效果如图 : 后端的代码如下 再在浏览器进行输入点击相加,就能获得结果 开发中程序报错,如何定位问题 1.先定位前端还是后端(通过日志分析) 1)前端 : F12 看控制台 2)后端 : 接口,控制台日志 举个例子: 如果出现了错误,我们就在后端…

如何查看网站的https的数字证书

如题 打开Chrome浏览器&#xff0c;之后输入想要抓取https证书的网址&#xff0c;此处以知乎为例点击浏览器地址栏左侧的锁的按钮&#xff0c;如下图 点击“连接是安全的”选项&#xff0c;如下图 点击“证书有效”选项卡&#xff0c;如下图 查看基本信息和详细信息 点击详细信…

linux内核基本知识一

1.ioremap映射访问和使用in/out直接访问的区别与联系 linux中使用ioremap映射访问和使用in/out直接访问的区别与联系&#xff1f;&#xff1f;&#xff1f; 在Linux内核中&#xff0c;ioremap()函数用于将物理地址映射到虚拟地址空间&#xff0c;以便在内核中访问设备寄存器或…