如何对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>
其他方式可自行探索
相关文章:
如何对element弹窗进行二次封装
方式一使用$refs 个人比较喜欢用这种的 通过$refs打开的同时 还能给弹窗组件传参 一些框架使用的也是这种方式 父组件 <template><div><el-button type"text" click"handleDialogOpen">打开嵌套表单的 Dialog</el-button><Dia…...
【微服务专题】手写模拟SpringBoot
目录 前言阅读对象阅读导航前置知识笔记正文一、工程项目准备1.1 新建项目1.1 pom.xml1.2 业务模拟 二、模拟SpringBoot启动:好戏开场2.1 启动配置类2.1.1 shen-base-springboot新增2.1.2 shen-example客户端新增启动类 三、run方法的实现3.1 步骤一:启动…...
七个优秀微服务跟踪工具
随着微服务架构复杂性的增加,在问题出现时确定问题的根本原因变得更具挑战性。日志和指标为我们提供了有用的信息,但并不能提供系统的完整概况。这就是跟踪的用武之地。通过跟踪,开发人员可以监控微服务之间的请求进度,从而使他们…...
redis 问题解决 1
1.1 常见考点 1、Redis 为何这么快? Redis 是一款基于内存的数据结构存储系统,它之所以能够提供非常快的读写性能,主要是因为以下几个方面的原因: 基于内存存储:Redis 所有的数据都存储在内存中,而内存的访问速度比磁盘要快得多。因此,Redis 可以提供非常快的读写性能…...
odoo16前端框架源码阅读——启动、菜单、动作
odoo16前端框架源码阅读——启动、菜单、动作 目录:addons/web/static/src 1、main.js odoo实际上是一个单页应用,从名字看,这是前端的入口文件,文件内容也很简单。 /** odoo-module **/import { startWebClient } from "…...
C/C++(a/b)*c的值 2021年6月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
目录 C/C(a/b)*c的值 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C(a/b)*c的值 2021年6月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 给定整数a、b、c,计算(a / b)*c的值&…...
CIFAR-100数据集的加载和预处理教程
一、CIFAR-100数据集介绍 CIFAR-100(Canadian Institute for Advanced Research - 100 classes)是一个经典的图像分类数据集,用于计算机视觉领域的研究和算法测试。它是CIFAR-10数据集的扩展版本,包含了更多的类别,用…...
C#,数值计算——函数计算,Eulsum的计算方法与源程序
1 文本格式 using System; namespace Legalsoft.Truffer { public class Eulsum { private double[] wksp { get; set; } private int n { get; set; } private int ncv { get; set; } public bool cnvgd { get; set; } pri…...
ChatGLM3 langchain_demo 代码解析
ChatGLM3 langchain_demo 代码解析 0. 背景1. 项目代码结构2. 代码解析2-1. utils.py2-2. ChatGLM3.py2-3. Tool/Calculator.py2-4. Tool/Weather.py2-5. main.py 0. 背景 学习 ChatGLM3 的项目内容,过程中使用 AI 代码工具,对代码进行解释,…...
asp.net学院网上报销系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio
一、源码特点 asp.net学院网上报销系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为vs2010,数据库为sqlserver2008,使用c#语言 开发 asp.net学院网上报销系统 应用技术…...
ElasticSearch知识点
什么是ElasticSearch ElasticSearch: 智能搜索,分布式的搜索引擎,是ELK的一个非常完善的产品,ELK代表的是: E就是ElasticSearch,L就是Logstach,K就是kibana Elasticsearch是一个建立在全文搜索引擎 Apache Lucene基础…...
STM32 GPIO
STM32 GPIO GPIO简介 GPIO(General Purpose Input Output)通用输入输出口,也就是我们俗称的IO口 根据使用场景,可配置为8种输入输出模式 引脚电平:0V~3.3V,部分引脚可容忍5V 数据0就是低电平,…...
Electron 开发页面应用
简介 Electron集成了包括chromium(理解为具备chrom浏览器的工具),nodejs,native apis chromium:支持最新特性的浏览器。 nodejs:js运行时,可实现文件读写等。 native apis :提供…...
CSDN写博文的128天
起因 为什么要写博文? 写博文是因为当我还是编程小白时,我那会啥也不懂,不懂函数调用,不懂指针,更不懂结构体,别更说Linux,平时不会也没有可以问的人,也幸好有CSDN,遇到…...
Linux学习教程(第二章 Linux系统安装)1
第二章 Linux系统安装 学习 Linux,首先要学会搭建 Linux 系统环境,也就是学会在你的电脑上安装 Linux 系统。 很多初学者对 Linux 望而生畏,多数是因为对 Linux 系统安装的恐惧,害怕破坏电脑本身的系统,害怕硬盘数据…...
vue2手机项目如何使用蓝牙功能
要在Vue2手机项目中使用蓝牙功能,你需要先了解基本的蓝牙知识和API。以下是一些基本的步骤: 确认你的手机设备支持蓝牙功能。在Vue2项目中安装蓝牙插件或库,例如vue-bluetooth或vue-bluetooth-manager。你可以通过npm安装它们。在Vue2项目中…...
魔兽服务器学习-笔记1
文章目录 一、环境准备1)依赖安装2)源码下载和编译 二、生成数据信息1)地图数据信息(客户端信息)2)数据库信息 三、启动服务器四、日志模块五、数据库模块六、场景模块1)地图管理2)A…...
代码随想录day60|84.柱状图中最大的矩形
84.柱状图中最大的矩形(找到右边第一个更小的元素) 1、对于每一个柱子:找到左边第一个比他矮的,再找到右边第一个比他矮的。 2、首尾加0: 为什么要在末尾加0:否则如果原数组就是单调递增的话,就…...
常见面试题-分布式锁
Redisson 分布式锁?在项目中哪里使用?多久会进行释放?如何加强一个分布式锁? 答: 什么时候需要使用分布式锁呢? 在分布式的场景下,使用 Java 的单机锁并不可以保证多个应用的同时操作共享资源…...
vue开发 安装一些工具
下载 node.js环境 nodeJs 官网 命令行输入 node -v 和 npm -v 出现版本号 代表nodejs 安装成功选择安装pnpm npm install -g pnpmpnpm -v 出现版本号即成功安装安装 scss vue3 组件库 Element Plus Element 官网 安装 pnpm install Element-Plus --save第一次使用开发v…...
Chrome文本替换插件:3步解决网页内容编辑难题
Chrome文本替换插件:3步解决网页内容编辑难题 【免费下载链接】chrome-extensions-searchReplace 项目地址: https://gitcode.com/gh_mirrors/ch/chrome-extensions-searchReplace 你是否曾为网页中的错别字烦恼?是否需要对产品页面进行批量修改…...
ncmdumpGUI终极指南:3分钟解锁网易云NCM文件播放限制
ncmdumpGUI终极指南:3分钟解锁网易云NCM文件播放限制 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换,Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾为网易云音乐的NCM格式文件而烦恼&am…...
零基础玩转Z-Image-Turbo-辉夜巫女:8步生成高质量图片,小白也能当AI画师
零基础玩转Z-Image-Turbo-辉夜巫女:8步生成高质量图片,小白也能当AI画师 1. 引言:人人都能成为AI画师 你是否曾经羡慕那些能随手画出精美插画的大触?现在,借助Z-Image-Turbo-辉夜巫女这个AI工具,零基础的…...
百考通:AI精准赋能答辩PPT,让零散的想法智能生成为结构化内容
毕业季、开题季,一份专业出彩的PPT是顺利通过答辩的关键。但从论文中提炼核心观点、规划答辩逻辑、设计美观版式,往往让学生们焦头烂额。百考通(https://www.baikaotongai.com) 凭借AI技术深度赋能,打造出一站式答辩PP…...
别再手动标注了!用百度大脑EasyData的多人协同功能,3步搞定团队数据标注
高效团队数据标注实战:用协同工具提升3倍效率 当五个人围着一堆猫狗图片争论"这只算狸花猫还是虎斑猫"时,数据标注工作就变成了效率黑洞。我们实验室去年标注10万张医疗影像的经历让我深刻理解:团队标注的核心痛点从来不是工具操作…...
Qt表格入门(优化篇)抡
1. 前言 本文详细介绍如何使用 kylin v10 iso 文件构建出 docker image,docker 版本为 20.10.7。 2. 构建 yum 离线源 2.1. 挂载 ISO 文件 mount Kylin-Server-V10-GFB-Release-030-ARM64.iso /media 2.2. 添加离线 repo 文件 在/etc/yum.repos.d/下创建kylin-local…...
清除被占用的接口?
举例“8080” “windowsr” —>cmd —>输入命令“netstat -nao | findstr “端口”” // 命令: //netstat -nao | findstr "端口号" netstat -nao | findstr "8080" taskkill -pid "5680“ -f...
DeEAR开源大模型教程:DeEAR模型权重导出、ONNX转换与C++推理部署指南
DeEAR开源大模型教程:DeEAR模型权重导出、ONNX转换与C推理部署指南 1. 项目概述 DeEAR(Deep Emotional Expressiveness Recognition)是一个基于wav2vec2的深度语音情感表达分析系统。这个开源项目能够准确识别语音中的情感特征,…...
《SRE:Google 运维解密》读书笔记02: 介绍 - SRE的起源与核心理念
作者: andylin02 学习章节:第1章 介绍 关键词:SRE起源、系统管理员模式、Dev vs Ops矛盾、错误预算、50%规则、自动化 一、引言:一场关于“快”与“稳”的战争 在上一本书的共读中,我们循序渐进地学习了从风险管理到监控、从消除…...
Mysql的行级锁到底是怎么加的?醒
1. 架构背景与演进动力 1.1 从单体到碎片化:.NET 的开源征程 在.NET Framework 时代,构建系统主要围绕 Windows 操作系统紧密集成,采用传统的封闭式开发模式。然而,随着.NET Core 的推出,微软开启了彻底的开源与跨平台…...
