tsx中使用el-dialog设置visible.sync,解决弹窗右上角叉号失效问题

news/2024/11/27 23:25:55/

在 TSX 中使用 el-dialog 设置 visible.sync

在 Vue 2 中,.sync 修饰符用于在父子组件之间同步属性值。然而,在 TSX 中并没有类似的 .sync 修饰符。如果要在 TSX 中实现类似的功能,需要手动实现。具体来说,可以通过监听 update:visible 事件来更新 dialogVisible 的值。

为什么需要 visible.sync

如果不设置 visible.sync,会导致 el-dialog 默认自带的右上角的叉号失效,无法关闭弹窗。这是因为 el-dialog 组件内部会触发 update:visible 事件来通知父组件更新 visible 属性的值。如果没有正确处理这个事件,弹窗的状态将无法同步更新。

实现步骤

  1. 定义 dialogVisible 变量:使用 ref 定义一个响应式变量 dialogVisible。
    监听 update:visible 事件:在 el-dialog 组件上绑定 update:visible 事件,当事件被触发时更新 dialogVisible 的值。
    设置 visible 属性:将 dialogVisible 的值传递给 el-dialog 的 visible 属性。
    示例代码
//其中dialogVisible为自定义的变量
const dialogVisible = ref(false)
<el-dialog title="动作配置"         on={{ ['update:visible']: ()=>{dialogVisible.value = !dialogVisible.value}}}         visible={ dialogVisible.value }>自定义内容
</el-dialog>

在这里插入图片描述
2. 详细解释

  • 定义 dialogVisible 变量,使用 ref 创建了一个响应式变量 dialogVisible,初始值为 false。
  • 监听 update:visible 事件:在 el-dialog 组件上绑定 update:visible 事件,当事件被触发时,传入的 value 参数会被赋值给 dialogVisible。
  • 设置 visible 属性:将 dialogVisible 的值传递给 el-dialog 的 visible 属性,从而控制对话框的显示和隐藏。

总结

通过上述步骤,我们可以在 TSX 中手动实现类似于 Vue 2 中的 .sync 修饰符的功能。这样可以确保 el-dialog 组件的右上角叉号能够正常关闭弹窗,提升用户体验。


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

相关文章

Jackson 对象与json数据互转工具类JacksonUtil

下面是一个基于 Jackson 的工具类 JacksonUtil&#xff0c;用于在 Java 项目中实现对象与 JSON 数据之间的互相转换。该工具类具有简洁、易用、通用的特点。 package com.fy.common.util;import com.fasterxml.jackson.core.JsonGenerator; import com.fasterxml.jackson.core…

SQL99版外连接

外连接 看这样的场景&#xff0c;在ta和tb两表中查询没有对应年龄数据的学生姓名和年龄 SELECT tb.name,ta.age FROM tb INNER JOIN ta ON tb.ta_idta.id WHERE ta.id IS NULL; 结果没有,所以前面的查询是解决不了这种问题&#xff01;&#xff01;&#xff01; 所以外连接…

Spring Boot 核心逻辑与工作原理详解

当然可以&#xff01;下面是一篇关于 Spring Boot 逻辑的文章&#xff0c;涵盖了其核心概念、主要特点和工作原理。 Spring Boot 的逻辑与工作原理 1. 引言 Spring Boot 是一个基于 Java 的框架&#xff0c;旨在简化新 Spring 应用的初始搭建和开发过程。它通过提供默认配置和…

第六章 Spring Boot快速⼊⻔ —— Spring Boot工作机制

前言: Spring Boot的工作机制主要围绕其自动配置、起步依赖、嵌入式Web服务器以及配置管理等方面展开。 自动配置:是通过预定义的约定和条件,它极大地简化了应用的开发过程,这一机制使得开发人员可以更加专注于业务逻辑的实现,而无需花费大量时间在繁琐的配置上。起步依赖…

如何在 Ubuntu 22.04 上安装带有 Nginx 的 ELK Stack

今天我们来聊聊如何在 Ubuntu 22.04 服务器上安装 ELK Stack&#xff0c;并集成 Nginx 作为 Web 服务器&#xff0c;同时使用 Let’s Encrypt Certbot 进行 SSL 认证。ELK Stack&#xff0c;包括 Elasticsearch、Logstash 和 Kibana&#xff0c;是一套强大的工具&#xff0c;用…

数组中元素互不相同的判断(暴力以及Trie 优化)

题目&#xff1a; 代码&#xff08;暴力&#xff09; o(n^4) // 循环暴力 #include<bits/stdc.h> using namespace std;const int N 2e350; int a[N][N];int main() {int n, m;cin >> m >> n;for(int i 1; i < m; i ) {for(int j 1; j < n; j ) {…

【大语言模型】ACL2024论文-20 SCIMON:面向新颖性的科学启示机器优化

【大语言模型】ACL2024论文-20 SCIMON&#xff1a;面向新颖性的科学启示机器优化 目录 文章目录 【大语言模型】ACL2024论文-20 SCIMON&#xff1a;面向新颖性的科学启示机器优化目录摘要研究背景问题与挑战如何解决创新点算法模型实验效果推荐阅读指数&#xff1a;★★★★☆ …

(已解决)wps无法加载此加载项程序mathpage.wll

今天&#xff0c;在安装Mathtype的时候遇到了点问题&#xff0c;如图所示 尝试了网上的方法&#xff0c;将C:\Users\Liai_\AppData\Roaming\Microsoft\Word\STARTUP路径中的替换为32位的Mathtype加载项。但此时&#xff0c;word又出现了问题 后来知道了&#xff0c;这是因为64位…