vue实现弹窗的动态导入(:is=“dialogName“)

news/2024/9/24 11:23:49/

组件的动态挂载

弹窗aaa.vue

javascript"><template><el-dialogwidth="700px "v-dialog-outdestroy-on-closev-if="dialogVisible":title="title":visible="dialogVisible":before-close="hideDialog":close-on-click-modal="false"><div class="dialog-body"></div><div class="dialog-footer"><el-button @click="hideDialog">取 消</el-button><el-button type="primary" @click="validateForm">确 定</el-button></div></el-dialog>
</template><script>
export default {name: "aaa",components: {},props: {},data() {return {dialogVisible: false,title: "",};},methods: {showDialog(data) {console.log(data);this.dialogVisible = true;this.title = data.type;if (data.data) {this.getDetail(data.data.id);}},hideDialog() {this.dialogVisible = false;this.$refs.form.resetFields();this.formData = {};this.$parent.getTableData();this.fileUploadUtils.fileList = [];},getDetail(id) {},async validateForm() {try {if (await this.$refs.form.validate()) this.submitForm();} catch (e) {}},submitForm() {},},created() {},mounted() {},
};
</script><style lang="scss" scoped>
::v-deep .el-dialog__body {padding: 20px 0 0 !important;
}.dialog-body {padding: 0 20px;max-height: 65vh;overflow-y: auto;
}.dialog-footer {text-align: center;padding: 10px 0 18px;
}
</style>

弹窗bbb.vue

javascript"><template><el-dialogwidth="700px "v-dialog-outdestroy-on-closev-if="dialogVisible":title="title":visible="dialogVisible":before-close="hideDialog":close-on-click-modal="false"><div class="dialog-body"></div><div class="dialog-footer"><el-button @click="hideDialog">取 消</el-button><el-button type="primary" @click="validateForm">确 定</el-button></div></el-dialog>
</template><script>
export default {name: "bbb",components: {},props: {},data() {return {dialogVisible: false,title: "",};},methods: {showDialog(data) {console.log(data);this.dialogVisible = true;this.title = data.type;if (data.data) {this.getDetail(data.data.id);}},hideDialog() {this.dialogVisible = false;this.$refs.form.resetFields();this.formData = {};this.$parent.getTableData();this.fileUploadUtils.fileList = [];},getDetail(id) {},async validateForm() {try {if (await this.$refs.form.validate()) this.submitForm();} catch (e) {}},submitForm() {},},created() {},mounted() {},
};
</script><style lang="scss" scoped>
::v-deep .el-dialog__body {padding: 20px 0 0 !important;
}.dialog-body {padding: 0 20px;max-height: 65vh;overflow-y: auto;
}.dialog-footer {text-align: center;padding: 10px 0 18px;
}
</style>

父组件中使用

javascript"><template> <div><el-buttontype="text"size="small"icon="iconfont if-biaodancaozuo-xiugai"@click="doSomething(scope.row, '审批', 'aaa')">审批</el-button><el-buttontype="text"size="small"icon="iconfont if-biaodancaozuo-xiugai"@click="doSomething(scope.row, '修改', 'bbb')">修改</el-button><component :is="dialogName" ref="dialog"></component></divd>	
</template>	export default {data() {return {dialogName: undefined,}},methods: {doSomething(data, type, dialogName) {this.dialogName = this.getDialog(dialogName);this.$nextTick(() => {this.$refs.dialog.showDialog({ data, type });});},getDialog(name) {// 替换成你自己的路径, name 就是组件名:aaa/bbb.vuereturn require(`@/views/maintenanceProject/engineeringManage/dialog/${name}.vue`).default;},}}

http://www.ppmy.cn/news/1433799.html

相关文章

Web入门-Tomcat

黑马程序员JavaWeb开发教程 文章目录 一、简介1、Web服务器2、Tomcat 二、基本使用三、入门程序解析 一、简介 1、Web服务器 对HTTP协议操作进行封装&#xff0c;简化web程序开发部署Web项目&#xff0c;对外提供网上信息浏览服务 2、Tomcat 概念&#xff1a;Tomcat是Apach…

【AI写作】未来科技趋势:揭秘DreamFusion的革新力量

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

新技术前沿-2024-大型语言模型LLM的本地化部署

参考快速入门LLM 参考究竟什么是神经网络 1 深度学习 1.1 神经网络和深度学习 神经网络是一种模拟人脑神经元工作方式的机器学习算法,也是深度学习算法的基本构成块。神经网络由多个相互连接的节点(也称为神经元或人工神经元)组成,这些节点被组织成层次结构。通过训练,…

idea 的使用和安装 以及简介

Java开发工具 大家刚才写代码的时候都是用记事本写的&#xff0c;但是有没有觉得记事本写代码不太方便啊&#xff01;记事本写代码单词写错了没有提示&#xff0c;格式也不好调整&#xff0c;写代码之后还需要我们到命令行使用javac命令手动编译&#xff0c;然后运行。 有没有一…

springboot的坑

问题&#xff1a;使用Autowired注入一个service&#xff0c;然后写了两个接口&#xff0c;第一个接口与请求时显示注入的service为空一直报错&#xff0c;但是第二个接口请求时service竟然不是空&#xff1f;在这里插入图片描述 凶手找到了&#xff0c;是private修饰。果然没仔…

JMeter--后置处理器--正则表达式提取器

正则表达式提取器&#xff08;Regular Expression Extractor&#xff09; 接口需要关联时&#xff0c;可以通过正则表达式提取所需要的值 右键 >>> 添加 >>> 后置处理器 >>> 正则表达式提取器&#xff08;Regular Expression Extractor&#xff0…

IP-guard getdatarecord 存在任意文件读取

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、产品介绍 IP-guard是由溢信科技股份有限公司开发的一款终端安全管…

Linux:Win10平台上,用VMware安装Centos7.x及系统初始化关键的相关配置(分步骤操作,详细,一篇足以)

VMware安装Centos7.x镜像的详细步骤&#xff1a;VMWare安装Centos系统&#xff08;无桌面模式&#xff09; 我这里是为了安装Hadoop集群&#xff0c;所以&#xff0c;以下这些步骤是必须进行的 如果你是学习Linux&#xff0c;可以跳过非必须的那些配置项 我安装的版本是&…