将el-dialog封装成函数调用

1、 使用Vue实例化方法

// MyDialog.js
import Vue from 'vue'
export const openFormDialog = function ({ props = {}, events = {} }) {const vm = new Vue({data () {return {form: {}}},render () {return (<el-dialogvisible={true}{...{ props }}{...{ on: events }}onClose={() => handleEvent('close')}><el-form label-width='80px'><el-form-item label='活动名称'><el-input v-model={this.form.name}></el-input></el-form-item><el-form-item label='活动区域'><el-select v-model={this.form.region} placeholder='请选择活动区域'><el-option label='区域一' value='shanghai'></el-option><el-option label='区域二' value='beijing'></el-option></el-select></el-form-item></el-form><span slot='footer' class="dialog-footer"><el-button onClick={() => { handleEvent('cancel') } }>取 消</el-button><el-button type="primary" onClick={() => handleEvent('confirm', this.form) }>确 定</el-button></span></el-dialog>)}}).$mount()const close = () => {document.body.removeChild(vm.$el)vm.$destroy()}const handleEvent = async (eventName, form) => {await events[eventName] && typeof events[eventName] === 'function' && events[eventName](form)close()}document.body.appendChild(vm.$el)
}

2、使用Vue.extend方法

// MyDialog.vue
<template><el-dialog:visible.sync="dialogVisible"v-bind="options.props"v-on="options.events"><el-form label-width='80px'><el-form-item label='活动名称'><el-input v-model="form.name"></el-input></el-form-item><el-form-item label='活动区域'><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><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="onConfirm">确 定</el-button></span></el-dialog>
</template><script>
export default {data () {return {dialogVisible: true,options: {props: {width: '30%'},events: {}}form: {}}},methods: {setAttrs (options) {this.options = { ...options }},async onConfirm () {await this.options.events.confirm && typeof this.options.events.confirm === 'function' && this.options.events.confirm(this.form)this.dialogVisible = false}}
}
</script>
// MyDialog.js
import Vue from 'vue'
import Dialog from './VDialog.vue'
export const openFormDialog = function (options) {const DialogConstructor = Vue.extend(Dialog)const instance = new DialogConstructor()instance.setAttrs(options)instance.$mount()document.body.appendChild(instance.$el)
}

3、注册使用

// main.js
import { openFormDialog } from './components/MyDialog.js'
Vue.prototype.$openFormDialog = openFormDialog
// 调用方法
this.$openFormDialog({props: {title: '测试标题',width: '30%',beforeClose (done) {done()}},events: {close () {console.log('close')},cancel () {console.log('cancel')},confirm (form) {console.log(form)}}})

以上为简单例子,可根据场景进行优化,期望各位留言告知是否有更好的实现方法

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

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

相关文章

共创无线物联网数字化新模式|协创数据×企企通采购与供应链管理平台项目成功上线

近日&#xff0c;全球无线物联网领先者『协创数据技术股份有限公司』&#xff08;以下简称“协创数据”&#xff09;SRM采购与供应链项目全面上线&#xff0c;并于近日与企企通召开成功召开项目上线总结会。 基于双方资源和优势&#xff0c;共同打造了物联网特色的数字化采购供…

齐聚众力,中国移动以“百川”定乾坤

近日&#xff0c;由工业和信息化部、宁夏回族自治区人民政府主办的2023中国算力大会在宁夏银川举办。中国移动党组书记、董事长杨杰参加开幕式&#xff0c;并在大会主论坛作题为《算网筑基锻引擎 数实融合创未来》的主旨演讲。在演讲中&#xff0c;杨杰表示&#xff1a;未来&am…

【Linux】线程篇Ⅱ:

线程Ⅱ &#x1f517;接上篇【线程篇Ⅰ】五、线程库 和 线程 id六、同步与互斥 &#x1f517;接上篇【线程篇Ⅰ】 &#x1f449;【Linux】线程篇Ⅰ&#xff1a;线程和task_struct 执行流的理解、相关接口命令、线程异常、线程的私有和共享 五、线程库 和 线程 id 对于 Linux …

Dockerfile快速搭建自己专属的LAMP环境,生成镜像lamp:v1.1,并推送到私有仓库

环境&#xff1a; CentOS 7 Linux 3.10.0-1160.el7.x86_64 具体要求如下&#xff1a; &#xff08;1&#xff09;基于centos:6基础镜像&#xff1b; &#xff08;2&#xff09;指定作者信息&#xff1b; &#xff08;3&#xff09;安装httpd、mysql、mysql-server、php、ph…

sql递归查询

一、postgresql 递归sql with recursive p as(select t1.* from t_org_test t1 where t1.id2union allselect t2.*from t_org_test t2 join p on t2.parent_idp.id) select id,name,parent_id from p; sql中with xxxx as () 是对一个查询子句做别名&#xff0c;同时数据库会对…

ubuntu卸载python导致无法进入图形页面

首先&#xff0c;进入tty界面&#xff0c;输入用户名和密码。如果忘记了用户名和密码&#xff0c;建议直接重装系统。修改tty的编码格式&#xff0c;输入 $LANG查看tty的编码格式&#xff0c;建议修改编码格式&#xff0c;避免中文或其他信息显示为■■■■■或◆◆◆◆◆ ex…

uCharts 运行微信小程序时,图表放在scroll-view中点击后不能正确获取点击的currentIndex一直为-1

图表在APP和H5中的点击位置是正常的,在微信小程序中会出现点击位置不对且有部分地方点击不到,最终我的解决方法如下。 1.查看包裹图表的元素中有没有元素开启了定位,可以去除定位属性试一试。 2.为微信平台的图表添加 isScrollView="true"属性。 解决方案: 添加 …

产品设计的步骤有哪些? 优漫动游

饭要一口一口吃&#xff0c;一口吃不成个大胖子&#xff0c;事情应该一个接一个地做&#xff0c;越是匆忙和混乱&#xff0c;就会产生越多的问题。今天我们来谈谈产品设计的步骤&#xff0c;以便更好地进行产品设计。 产品设计的步骤有哪些&#xff1f; 1.市场调查 对调…

【快速傅里叶变换(fft)和逆快速傅里叶变换】生成雷达接收到的经过多普勒频移的脉冲雷达信号(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【InsCode】InsCode打造的JavaSE与Linux命令互融的伪Linux文件系统小项目

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Ja…

提升网站排名:SEO优化的实用策略和技巧

导言&#xff1a; 搜索引擎优化&#xff08;SEO&#xff09;是提高网站在搜索引擎中排名的关键策略&#xff0c;有助于提升网站的可见性和流量。本文将分享一些实用的SEO优化策略和技巧&#xff0c;帮助您在竞争激烈的网络世界中脱颖而出。 一、关键词研究和优化 关键词选择&…

centos7.9 openssl升级

软件下载 wget https://www.openssl.org/source/openssl-1.1.1v.tar.gz --no-check-certificate依赖安装 yum install -y gcc gcc-c autoconf automake zlib-devel pcre-devel编译安装 tar -zxvf openssl-1.1.1v.tar.gz cd openssl-1.1.1v ./config --prefix/usr/local/openssl…

Ajax+Vue+ElementUI

文章目录 1.Ajax1.1 介绍1.2 Ajax快速入门1.3 案例-用户注册时&#xff0c;检测用户名是否数据库已经存在1.4 Axios1.4.1 Axios快速入门1.4.2 请求别名 1.5 JSON1.5.1 Json的基础语法1.5.2 FastJson的使用5.3.2 Fastjson 使用 2. Vue2.1 介绍2.2 Vue快速入门2.3 Vue常用指令和生…

MySQL 数据备份和数据恢复

目录 一、数据备份 1、概述 2、MySQLdump命令备份 1&#xff09;备份单个数据库中的所有表 2) 备份数据中某个或多个表 3) 备份所有数据库 4&#xff09;备份多个库 5) 只备份一个表或多个表结构 二、数据恢复 三、数据备份与恢复应用 一、数据备份 1、概述 数据备…

深度学习基本理论上篇:(MLP/激活函数/softmax/损失函数/梯度/梯度下降/学习率/反向传播)、深度学习面试

深度学习基本理论下篇&#xff1a;&#xff08;梯度下降/卷积/池化/归一化/AlexNet/归一化/Dropout/卷积核&#xff09; 深度学习基本理论下篇&#xff1a;&#xff08;梯度下降/卷积/池化/归一化/AlexNet/归一化/Dropout/卷积核&#xff09;、深度学习面试_会害羞的杨卓越的博…

解决git上传远程仓库时的大文件提交

在git中超过100M的文件会上传失败&#xff0c;而当一个文件超过50M时会给你警告&#xff0c;如下 warning: File XXXXXX is 51.42 MB; this is larger than GitHubs recommended maximum file size of 50.00 MB 解决这种问题&#xff0c;首先在项目的.git文件夹中找到.gitigno…

日撸java_day63-65

文章目录 Booster代码运行截图 Booster 代码 package machineLearning.adaboosting;import weka.core.Instances;import java.io.FileReader; import java.util.Arrays;/*** ClassName: WeightedInstances* Package: machineLearning.adaboosting* Description:Weighted inst…

STM32移植u8g2玩转oled 用软件iic实现驱动oled

移植u8g2到stm int fputc(int ch,FILE *f) {ITM_SendChar(ch);return (ch); }void delay_us(uint32_t time) {uint32_t i8*time;while(i--); }uint8_t STM32_gpio_and_delay(u8x8_t *u8x8, uint8_t msg, uint8_t arg_int, void *arg_ptr) {//printf("%s:msg %d,arg_int …

Vue+Axios搭建二次元动态登录页面(mp4视频格式)

最近想做一个前端登录页面&#xff0c;背景好看的&#xff0c;格式中规中矩的&#xff0c;这么难&#xff1f;我自己创一个吧&#xff01; 效果图如下&#xff1a; 源码可以参考我的github&#xff0c;复制源码即可用&#xff1a;gym02/loginPage_Vue: 使用VueAxios搭建的动态…

五、Spring MVC 接收请求参数以及数据回显、乱码问题

文章目录 一、Spring MVC 接收请求参数二、Spring MVC 数据回显三、SpringMVC 返回中文乱码问题 一、Spring MVC 接收请求参数 客户端或者前端通过 URL 请求传递过来的参数&#xff0c;在控制器中如何接收&#xff1f; 1、当参数和 Controller 中的方法参数一致时&#xff0c;无…