element-plus弹窗二次封装踩坑

1 基于element-plus的二次封装弹窗很常见。代码如下:

父组件:

import Dialog from './components/Dialogs/testDailog.vue'

const show=ref(false)
const openDialog=()=>{
  show.value=true

}



<button @click="openDialog" >打开dialoag</button>
<Dialog   v-model="show"/>

弹窗的内容:

<template>
  <el-dialog
    v-model="visible"
    title="Tips"
    width="30%"
    @close="handerClose"
  >
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <el-button @click="cancel">取消</el-button>
    <el-button @click="confirm">确定</el-button>
      
  </el-dialog>
</template>

<script setup lang='ts'>

import { ref, reactive, watch, onMounted, onUnmounted } from 'vue'

const emits=defineEmits(['close','confirm','update:modelValue'])

const props=defineProps({
    modelValue:{
        type:Boolean,
        default:false
    }
})
const visible=ref(false)

const cancel=()=>{
    emits('update:modelValue',false)
}
const confirm=()=>{
    emits('update:modelValue',false)
}

const handerClose=()=>{
    console.log("点击关闭按钮");
    emits('update:modelValue',false)
}

watch(()=>props.modelValue,(newVal)=>{
    visible.value=newVal;
    console.log("props.modelValue",props.modelValue);
    emits('update:modelValue',newVal)
})



</script>


<style lang='scss' scoped>

</style>

到这基本上就可以实现了。这一版的特点就是弹窗的关闭时其实本身没有销毁。我们是通过双向绑定跟新了弹窗的状态

但是我们考虑一个场景,就是表单弹窗复用。新增和编辑态我们要做区分。这时候我们手动传属性标识是编辑还是新增就很麻烦。有一个简单的办法就是我们在关闭弹窗时直接把它销毁,这样每次我们只需要在生命周期的onMounted中判断是否有id传过来就可以了。如果有id则说明是编辑态。否则是新增的场景。这样就很容易区分。我们改造下代码:

改进版

销毁弹窗我们通过v-if来控制

父组件
  
<button @click="openDialog" >打开dialoag</button>
  <Dialog  v-if="show" v-model="show"/>
//注意这里增加了v-if
弹窗组件
<template>
  <el-dialog
    v-model="visible"
    title="Tips"
    width="30%"
    @close="handerClose"
  >
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <P>This is a message</P>
    <el-button @click="cancel">取消</el-button>
    <el-button @click="confirm">确定</el-button>
      
  </el-dialog>
</template>

<script setup lang='ts'>

import { ref, reactive, watch, onMounted, onUnmounted } from 'vue'

const emits=defineEmits(['close','confirm','update:modelValue'])

const props=defineProps({
    modelValue:{
        type:Boolean,
        default:false
    }
})
const visible=ref(props.modelValue)

const cancel=()=>{
    emits('update:modelValue',false)
}
const confirm=()=>{
    emits('update:modelValue',false)
}

const handerClose=()=>{
    console.log("点击关闭按钮");
    emits('update:modelValue',false)
}

onMounted(()=>{
    console.log("挂载");
})

onUnmounted(()=>{
    console.log("卸载");
})
watch(()=>props.modelValue,(newVal)=>{
    visible.value=newVal;
    console.log("props.modelValue",props.modelValue);
    emits('update:modelValue',newVal)
})



</script>


<style lang='scss' scoped>

</style>

在组件内部,我们通过定义visible,初始状态和props.modelValue绑定,后续跟新在watch里同步,这样就可以实现每次销毁和挂载

注意:

const visible=ref(props.modalValue),定义visible的时候一定要先和props.modalValue进行绑定。不然父组件点击不会弹出来

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

题解 洛谷 Luogu P1182 数列分段 Section II 二分答案 C/C++

题目传送门&#xff1a; P1182 数列分段 Section II - 洛谷 | 计算机科学教育新生态https://www.luogu.com.cn/problem/P1182思路&#xff1a; 二分答案&#xff0c;每次以区间 [l, r] 中点 m 为每段和的阈值 判断在此前提下&#xff0c;划分段数是否不大于 M 是就记录答案…

26.100ASK_T113-PRO 测试摄像头 输出信息

1.测试代码 读到摄象头参数 输出 video_test.c #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <sys/ioctl.h> #include <unistd.h> #include <stdio.h> #include <string.h> #include <linux/type…

git使用文档手册

创建一个本地代码工作空间&#xff0c;比如这里使用test目录作为工作目录 针对仓库地址 http://192.168.31.125:9557/poxiaoai-crm/project-crm.git。 1. 安装 Git 确保您的系统已经安装了 Git。如果未安装&#xff0c;请根据操作系统访问 Git 官网 下载并安装。 验证安装 …

HTML5和CSS3新增特性

HTML5的新特性 HTML5新增的语义化标签 HTML5 的新增特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题&#xff0c;基本是 IE9 以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量…

BUUCTF—Reverse—不一样的flag(7)

是不是做习惯了常规的逆向题目&#xff1f;试试这道题&#xff0c;看你在能不能在程序中找到真正的flag&#xff01;注意&#xff1a;flag并非是flag{XXX}形式&#xff0c;就是一个’字符串‘&#xff0c;考验眼力的时候到了&#xff01; 注意&#xff1a;得到的 flag 请包上 f…

通信与网络安全之IPSEC

IPSec&#xff08;IP Security&#xff09;是IETF制定的为保证在Internet上传送数据的安全保密性能的三层隧道加密协议。IPSec在网络层对IP报文提供安全服务。IPSec协议本身定义了如何在IP数据包中增加字段来保证IP包的完整性、 私有性和真实性&#xff0c;以及如何加密数据包。…

树莓派搭建NextCloud:给数据一个安全的家

前言 NAS有很多方案&#xff0c;常见的有 Nextcloud、Seafile、iStoreOS、Synology、ownCloud 和 OpenMediaVault &#xff0c;以下是他们的特点&#xff1a; 1. Nextcloud 优势&#xff1a; 功能全面&#xff1a;支持文件同步、共享、在线文档编辑、视频会议、日历、联系人…

AWS账户注册未完成会收费吗?

在当今云计算的时代&#xff0c;亚马逊网络服务&#xff08;AWS&#xff09;已经成为众多企业和开发者的首选平台。然而&#xff0c;对于许多刚接触云服务的人来说&#xff0c;关于AWS账户注册的费用问题常常引发疑虑&#xff1a;如果我在注册过程中未能完成操作&#xff0c;是…

在线音乐播放器 —— 测试报告

自动化脚本源代码&#xff1a;Java: 利用Java解题与实现部分功能及小项目的代码集合 - Gitee.com 目录 前言 一、项目简介 1.项目背景 2.应用技术 &#xff08;1&#xff09;后端开发 &#xff08;2&#xff09;前端开发 &#xff08;3&#xff09;数据库 二、项目功能…

TCP/IP协议攻击与防范

一、TCP/IP协议攻击介绍 1.1 Internet的结构​ LAN&#xff1a;局域网 WAN&#xff1a;广域网 WLAN&#xff1a;无线局域网 私有IP地址与公有IP地址&#xff1f; 私有地址&#xff1a;A类&#xff1a;10.0.0.0~10.255.255.255 B类&#xff1a;172.16.0.0~172.31.255.255…

Unity ShaderLab 实现3D物体描边

实现思路&#xff1a; 给物体添加第二个材质球&#xff0c;在shader的顶点着色器中使顶点的位置变大&#xff0c;然后在片元着色器中输出描边颜色。 shader Graph实现如下&#xff1a; ShaderLab实现如下&#xff1a; Shader "Custom/Outline" {Properties{[HDR]_…

复合查询和内外连接

文章目录 1. 简单查询2. 多表查询2.1 显示雇员名、雇员工资以及所在部门的名字2.2 显示部门号为10的部门名&#xff0c;员工名和工资2.3 显示各个员工的姓名&#xff0c;工资&#xff0c;及工资级别 3. 自连接4. 子查询4.1 where后的子查询4.1.1 单行子查询4.1.2 多行子查询 (i…

java八股-分布式服务的接口幂等性如何设计?

文章目录 接口幂等token Redis分布式锁 原文视频链接&#xff1a;讲解的流程特别清晰&#xff0c;易懂&#xff0c;收获巨大 【新版Java面试专题视频教程&#xff0c;java八股文面试全套真题深度详解&#xff08;含大厂高频面试真题&#xff09;】 https://www.bilibili.com/…

Windows Serv 2019 虚拟机 安装Oracle19c,图文详情(超详细)

1、下载安装文件 Oracle官网下载直链&#xff1a;https://www.oracle.com/database/technologies/oracle-database-software-downloads.html#db_ee 夸克网盘下载&#xff1a;https://pan.quark.cn/s/1460a663ee83 2、新建 Windows Server 2019 虚拟机 &#xff08;超详细&a…

时间的礼物:如何珍视每一刻

《时间的礼物&#xff1a;如何珍视每一刻》 夫时间者&#xff0c;宇宙之精髓&#xff0c;生命之经纬&#xff0c;悄无声息而流转不息&#xff0c;如织锦之细线&#xff0c;串联古今&#xff0c;贯穿万物。 人生短暂&#xff0c;犹如白驹过隙&#xff0c;倏忽而逝&#xff0c;…

FreeRTOS之vTaskStartScheduler实现分析

FreeRTOS之vTaskStartScheduler实现分析 1 FreeRTOS源码下载地址2 函数接口2.1 函数接口2.2 函数参数简介3 vTaskDelete的调用关系3.1 调用关系3.2 调用关系示意图 4 函数源码分析4.1 vTaskStartScheduler4.2 prvCreateIdleTasks4.2.1 prvCreateIdleTasks4.2.2 xTaskCreate 4.3…

NLP论文速读(EMNLP2024)|多风格可控生成的动态多奖励权重

论文速读|Dynamic Multi-Reward Weighting for Multi-Style Controllable Generation 论文信息&#xff1a; 简介&#xff1a; 本文探讨了文本风格在沟通中的重要性&#xff0c;指出文本风格传达了除原始语义内容之外的多种信息&#xff0c;如人际关系动态&#xff08;例如正式…

【AI】Sklearn

长期更新&#xff0c;建议关注、收藏、点赞。 友情链接&#xff1a; AI中的数学_线代微积分概率论最优化 Python numpy_pandas_matplotlib_spicy 建议路线&#xff1a;机器学习->深度学习->强化学习 目录 预处理模型选择分类实例&#xff1a; 二分类比赛 网格搜索实例&…

Dockerfile打包部署

Dockerfile打包 先找到打包完的目录下创建一个Dockerfile文件 touch Dockerfile 进去文件内编写 vim Dockerfile # 基础镜像 FROM openjdk:8 # author MAINTAINER yxh # 挂载目录 VOLUME /home/project # 创建目录 RUN mkdir -p /home/project # 指定路径 WORKDIR /home/pr…

鸿蒙学习使用模拟器运行应用(开发篇)

文章目录 1、系统类型和运行环境要求2、创建模拟器3、启动和关闭模拟器4、安装应用程序包和上传文件QA:在Windows电脑上启动模拟器&#xff0c;提示未开启Hyper-V 1、系统类型和运行环境要求 Windows 10 企业版、专业版或教育版及以上&#xff0c;且操作系统版本不低于10.0.18…