Vue3全局封装dialog弹框

news2024/11/25 21:53:24

Vue3全局封装modal弹框使用:

应用场景:全局动态form表单弹框
应用Vue3碎片: ref,reactive,app.component,defineExpose,defineProps,defineEmits
应用UI: element-plus dialog form

一.封装

1.引入
main.js

import App from './App.vue'
import ModalPanel from "@/components/element/ModalPanel.vue";
const app=createApp(App)
app.component('ModalPanel',ModalPanel)

2.使用

  <ModalPanel  
    :defineWidth="defineWidth" 
    :selSingle="selSingle"
    :editTitle="editTitle"
    :editType="editType"
    :editForm="editForm"
    :fixedParam="fixedParam"
    :randomParam="randomParam"
    @updateData="declareData"
    @updateShow="updateSingShow"
    :key="modalPannelKey"
   />

开启

const openModalPannel = () => {
  defineWidth.value=500;
  editType.value="add";
  editTitle.value="操作";
  fixedParam.value=[
  { name:"XX",value:"name"},
  ];
   randomParam.value=[
  { name:"xy",value:"name"},
  ];
}

关闭

const updateSingShow = () => {
  selSingle.value=false;
}

接收

const declareData= (data) => {
   //do...
}

二.具体封装

1.接收参数

const selSingleShow = ref(false);
const props = defineProps({
  defineWidth: {
    required: true,
    type: Number,
    default: 0,
  },
  selSingle: {
    required: true,
    type: Boolean,
    default: "",
  },
  editTitle: {
    required: true,
    type: String,
    default: "",
  },
  editType: {
    required: true,
    type: String,
    default: "",
  },
  editForm: {
    required: true,
    type: Object,
    default: {},
  },
  fixedParam: {
    required: true,
    type: Array,
    default: [],
  },
  randomParam: {
    required: true,
    type: Array,
    default: [],
  },
});
const emit = defineEmits(['updateData','updateShow']);
const formList = reactive([]);

2.初始化值

onMounted(() => {
  if(props!=undefined){
        formList.push(...props.fixedParam);
        formList.push(...props.randomParam);
       selSingleShow.value=props.selSingle;
    }
});

3.关闭弹框

const  updateSingle=()=>{
  emit("updateShow",selSingleShow);
}

4.更新数据

const updateNameChange=(data)=> {
    emit("updateData",data);
}

5.弹框

 <el-dialog
      v-model="selSingleShow"
      :title="editTitle"
      :width="defineWidth"
      align="left">
      <div class="modal-padding">
        <el-form
          ref="ruleFormRef"
          label-width="auto"
          label-position="top"
          :model="editForm"
          :rules="rules"
          class="demo-ruleForm"
        >
        <div v-for="(item, index) in formList">
          <el-form-item :label="item.name" :prop="item.value">
            <el-input v-model="editForm[item.value]" />
          </el-form-item>
        </div>
        </el-form>
      </div>
      <template #footer>
        <div class="modal-footer-padding">
          <el-button  type="primary"
            >确认</el-button
          >
          <el-button >取消</el-button>
        </div>
      </template>
    </el-dialog>

三,交互

1.组件暴露方法

import { ref, reactive, onMounted,defineExpose} from "vue";
defineExpose({
  updateView,
});

2.引入页调用

const ModalRef= ref(null);
const ModalKey= ref(0);
 <ModalPanel  ref="ModalRef" :key="ModalKey"/>

刷新数据


  if(ModalRef.value!=null){
    ModalRef.value.updateViewList() //刷新数据
  }

更新组件

ModalKey.value+= 1;

在这里插入图片描述

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

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

相关文章

【设计模式】结构型设计模式之 适配器模式

介绍 适配器模式&#xff08;Adapter Pattern&#xff09; 是一种结构型设计模式&#xff0c;它的核心目的是使接口不兼容的类能够协同工作。适配器模式通过将一个类的接口转换为客户希望的另一个接口&#xff0c;来解决两个已有接口之间不匹配的问题&#xff0c;从而增加它们…

【Vue】声明式导航-自定义类名(了解)

问题 router-link的两个高亮类名 太长了&#xff0c;我们希望能定制怎么办 解决方案 我们可以在创建路由对象时&#xff0c;额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass const router new VueRouter({routes: [...],linkActiveClass: "类名1&quo…

微信小程序毕业设计-网吧在线选座系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

Hadoop 2.0:主流开源云架构(一)

目录 一、引例&#xff08;一&#xff09;问题概述&#xff08;二&#xff09;常规解决方案&#xff08;三&#xff09;分布式下的解决方案&#xff08;四&#xff09;小结 自从云计算的概念被提出&#xff0c;不断地有IT厂商推出自己的云计算平台&#xff0c;但它们都是商业性…

LeetCode | 997.找到小镇的法官

这道题拿到后很明显是一个图论的简单出度入度问题&#xff0c;法官的标志就是图中出度为0&#xff0c;入度为n-1的结点&#xff0c;而且根据题目条件&#xff0c;满足这一条件的结点有且只有一个 但是我不知道力扣中关于图论的邻接表和邻接矩阵这些数据结构是需要自己写还是已经…

shell编程(三)—— 控制语句

程序的运行除了顺序运行外&#xff0c;还可以通过控制语句来改变执行顺序。本文介绍bash的控制语句用法。 一、条件语句 Bash 中的条件语句让我们可以决定一个操作是否被执行。结果取决于一个包在[[ ]]里的表达式。 bash中的检测命令由[[]]包起来&#xff0c;用于检测一个条…

论文中eps格式图片制作

在提交论文终稿时&#xff0c;有时需要提交论文中图片的eps格式&#xff0c;这里记录一下eps格式图片制作的过程&#xff0c;方便以后查阅。 论文中eps格式图片制作 PPT绘制的图片转换为eps格式使用代码生成的图片Latex中显示的图片大小跟Ai中设定画板的大小不一致 PPT绘制的图…

品牌策划:不只是工作,是一场创意与学习的旅程

你是否认为只有那些经验丰富、手握无数成功案例的高手才能在品牌策划界崭露头角&#xff1f; 今天&#xff0c;我要悄悄告诉你一个行业内的秘密&#xff1a;在品牌策划的世界里&#xff0c;经验虽重要&#xff0c;但绝非唯一。 1️、无止境的学习欲望 品牌策划&#xff0c;这…

智能投顾:重塑金融理财市场,引领行业新潮流

一、引言 在数字化浪潮的推动下,金融行业正经历着前所未有的变革。其中,智能投顾作为金融科技的重要分支,以其高效、便捷和个性化的服务,逐渐成为金融理财市场的新宠。本文旨在探讨智能投顾如何引领金融理财新潮流,通过丰富的案例及解决方案,展示其独特的魅力和价值。 二…

Clearedge3d EdgeWise 5.8 强大的自动化建模软件

EdgeWise是功能强大的建模软件&#xff0c;提供领先的建模功能和先进的技术&#xff0c;让您的整个过程更快更准确&#xff01;您可以获得使用自动特征提取和对象识别的 3D 建模&#xff0c;ClearEdge3D 自动建模和对象识别软件通过创建竣工文档和施工验证完成该过程。拓普康和…

Go singlefight 源码详解|图解

写在前面 通俗的来说就是 singleflight 将相同的并发请求合并成一个请求&#xff0c;进而减少对下层服务的压力&#xff0c;通常用于解决缓存击穿的问题。 详解 基础结构 golang.org/x/sync/singleflight singleflight结构体&#xff1a; type call struct {wg sync.WaitGro…

永磁同步电机双矢量模型预测转矩控制MPTC

导读&#xff1a;本期文章主要介绍永磁同步电机双矢量模型预测转矩控制。由于传统直接转矩控制和单矢量的模型预测转矩控制转矩纹波较大&#xff0c;且在全速范围内的开关频率不固定&#xff0c;针对这一缺陷&#xff0c;引入双矢量MPTC。 如果需要文章中的仿真模型&#xff0…

AI生成个性化壁纸

使用天工AI 将图片设置成桌面壁纸

transformer 位置编码源码解读

import torch import mathdef get_positional_encoding(max_len, d_model):"""计算位置编码参数&#xff1a;max_len -- 序列的最大长度d_model -- 位置编码的维度返回&#xff1a;一个形状为 (max_len, d_model) 的位置编码张量"""positional_e…

IDEA启动项目报java.lang.OutOfMemoryError: GC overhead limit exceeded

idea编译项目时报j ava.lang.OutOfMemoryError: GC overhead limit exceeded错误&#xff0c;教你两步搞定&#xff01; 第一步&#xff1a;打开help -> Edit Custom VM Options ,修改xms和xmx的大小&#xff0c;如下图&#xff1a; 第二步&#xff1a;File -> Settings…

素数的无穷大的证明

素数的无穷大——欧几里得的证明 文章目录 一、说明二、欧几里得证据三、哥德巴赫对素数无穷性的证明&#xff08;1730&#xff09;四、Frstenberg 对素数无穷性的证明(1955)五、库默尔对欧几里得证明的重述 一、说明 众所周知&#xff0c;素数是无限多的。然而&#xff0c;两…

使用 Sysbench 测试文件的读写速度

要使用 Sysbench 测试文件的读写速度&#xff0c;你可以按照以下步骤进行&#xff1a; 安装 Sysbench&#xff1a; 如果你还没有安装 Sysbench&#xff0c;可以通过以下命令在 Ubuntu 上安装&#xff1a; sudo apt install sysbench创建测试文件&#xff1a; 首先&#xff0c…

32-读取Excel数据(xlrd)

本篇介绍如何使在python中读取excel数据。 一、环境准备 先安装xlrd模块&#xff0c;打开cmd&#xff0c;输入 pip install xlrd 在线安装。 二、基本操作 import xlrd# 打开excel表格 data xlrd.open_workbook(test.xlsx)# 2.获取sheet表格 # 方式一&#xff1a;通过索引顺…

【Java基础】多线程开发

Java多线程编程学习笔记 Author: Jim.kk Video: Bilibili 文章目录 Java多线程编程学习笔记学习路线简介程序、进程与线程的关系JVM简介 | 多线程在JVM中的执行示例CPU 线程的调度方式多线程的意义并行与并发 创建多线程 1 | Thread 与 Runnable方式 1 | 继承 Thread 类方式 …

spool 管道 小文件 mknod

Spool File In SQL*PLUS in Multiple Small Files ? (Doc ID 2152654.1)​编辑To Bottom In this Document Goal Solution APPLIES TO: Oracle Database - Enterprise Edition - Version 10.2.0.1 to 12.1.0.2 [Release 10.2 to 12.1] Oracle Database Cloud Schema Service…