naive-ui的dialog.warning 关闭和阻止关闭

news2024/11/19 5:49:21

序:

        1、如果你卡到 了,博主没写博客,可以在博主的公众号:“程序员野区” 留言。博主看到有时间再帮你去试

        2、博主主要讲的怎么 主动关闭dialog和阻止dialog 自动关闭。

注意!!!!来,你先得引入

import { createDiscreteApi} from 'naive-ui'
const { message,dialog,notification,loadingBar} = createDiscreteApi(['message', 'dialog', 'notification', 'loadingBar'])

案例一、先官方自带的确定按钮

let password=""
			let password2=""
			let dialogObj=dialog.warning({
				title: '修改密码',
				icon:()=>cycIcon("dialog-icon icon-tianchongxing-"),
				positiveText: '确定',
				negativeText: '取消',
				onPositiveClick: () => {
					if(password!=password2){
						message.warning("两次输入密码不一致")
						return false;
					}
				},
				content: () => h(NSpace,{
						vertical:true
					},[
						h(NInput,{type:"password",defaultValue:"",placeholder:"请输入密码",
							onChange:(value)=>{
								password=value
							}
						}),
						h(NInput,{
							type:"password",
							defaultValue:"",
							placeholder:"再次输入密码",
							onChange:(value)=>{
								password2=value
							}
						}),
					]
				),
				
			})	

onPositiveClick里,

return false,就不会关闭,

return true就会关闭

案例二、自己写关闭按钮

            let password=""
			let password2=""
			let dialogObj=dialog.warning({
				title: '修改密码',
				icon:()=>cycIcon("dialog-icon icon-tianchongxing-"),
				positiveText: '确定',
				negativeText: '取消',
				// onPositiveClick: () => {
				// 	if(password!=password2){
				// 		message.warning("两次输入密码不一致")
				// 		return false;
				// 	}
				// },
				content: () => h(NSpace,{
						vertical:true
					},[
						h(NInput,{type:"password",defaultValue:"",placeholder:"请输入密码",
							onChange:(value)=>{
								password=value
							}
						}),
						h(NInput,{
							type:"password",
							defaultValue:"",
							placeholder:"再次输入密码",
							onChange:(value)=>{
								password2=value
							}
						}),
					]
				),
				action: () => h(NSpace,[
						h(NButton,{
							class:"c_gray ",
							size: 'small',
							onClick: () => {
								dialogObj.destroy();
							},
						},{default: () => "取消" }),
						h(NButton,{
							size: 'small',
							type:"success",
							onClick: () => {
								
							}
						},{default: () => "提交" }),
					]
				)
			})	

看到代码了吗dialogObj.destroy(); 就是关闭

前提是你前面要先定义let dialogObj=dialog.warning({

三、还有一点,怎么关闭全部的dialog.warning?

记得博文开头那个引入的要写进代码里哦

dialog.destroyAll();

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

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

相关文章

蛋白组学富集分析 uniport id蛋白ID如何进行KEGG和GO富集分析 代谢组学

使用蛋白ID如何进行KEGG和GO富集分析 - 知乎 (zhihu.com) 昨天,有个童鞋咨询如何使用蛋白ID进行功能富集分析,功能富集分析主要是KEGG和GO。 思路 蛋白ID转UniProt数据库IDUniProt数据库ID转KEGG和GO号使用KEGG和GO号进行富集分析 教程(实操…

5.CSS(二)

目录 一、Emmet语法 (一)快速生成HTML结构语法 (二)快速生成CSS样式语法 二、CSS的复合选择器 (一)后代选择器(重要) (二)子选择器(重要&…

这些文档翻译软件助力你成功翻译外语文档

明华:嘿,你知道吗?我刚刚发现了三款超级好用的文档翻译软件!简直就是我的救星啊! 彦琪:真的吗?我在翻译文档的问题一直觉得很头痛。我想找一款网站来翻译文档,又不知道文档翻译在线…

Nginx教程(相关概念)

Nginx 简介 1、什么是Nginx Nginx(engine x") 是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好Nginx专为性能优化而开发,性能是其最重要的考量…

vue中在使用keep-alive时,会出现在页面跳转后el-tooltip或el-dropdown不消失的问题以及解决方法

一、 问题复现 跳转前: 跳转后: 二、分析 由于在vue中使用了keep-alive,页面在切换时,上一个页面的实例被缓存了,跳转后并没有销毁,所以才会残留 tooltip或dropdown,所以有以下解决思路&am…

[C++] C++入门第一篇 -- 命名空间,输入输出,缺省函数,函数重载底层原理

目录 1、关键字 2、命名空间 2.1 命名空间的定义 2.2 命名空间的使用方式 2.2.1 加命名空间名称及作用域限定符 2.2.2 使用using将命名空间中某个成员引入 2.2.3 使用using namespace 命名空间名称引入 3、C输入与输出 4、缺省参数 4.1 缺省参数的概念 4.2 缺省参数…

Blazor前后端框架Known-V1.2.7

V1.2.7 Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行。 Gitee: https://gitee.com/known/KnownGithub:https://github.com/known/Known 概述 基于C#和Blazor…

预科C语言

1.day10 1、perror() 原型:void perror(const char *s); 根据errno呈现错误信息 perror("malloc error"); malloc error: Cannot allocate memory 2、多文件编译 .c ---预处理(.i -E)---汇编(.s -S&#xf…

threeJs着色器ShaderMaterial以及统一着色语言GLSL语法基本介绍

一、着色器材质ShaderMaterial的基本使用 废话不多讲先来看案例 console.log(着色器入门)// 引入three.js import * as THREE from three // 引入OrbitControls控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 初始化场景 const scene n…

git 提交换行符问题:LF would be replaced by CRLF

提交git 记录时,遇到问题 fatal: LF would be replaced by CRLF 原因: 是因为git换行符的导致Unix/Linux使用的是LF,Mac后期也采用了LF,但Windows一直使用CRLF 解决方案:禁止转换文件格式,其次允许提交换行符的文件 …

钉钉返回:访问ip不在白名单之中,请参考FAQ

新版钉钉 在开发管理-服务器出口IP-配置返回错误信息返回给你的requestIp

“国产大会”,世界人工智能大会有何影响力?

之前我们讲过,这个世界人工智能大会是我们中国人自己创办的世界级的大会,是全球范围内的人工智能领域盛会,它对人工智能的发展和应用有着超重要的影响力!首先,它吸引全球各个领域的专家、学者、企业家和政府官员关注和…

Windows上安装PostgreSQL

下载地址:PostgreSQL下载网址 因为某些问题我自己安装的是postgresql-11.2-1-windows-x64 根据下图顺序安装即可,不同版本可能顺序有点区别但每部分目的都是一样的。 首先右键以管理员身份运行,可以弹出安装界面

在 3ds Max 和 After Effects 中创建逼真的蜘蛛网模型

推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 创建蜘蛛网 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 转到创建>标准基元>平面并创建一个平面 在前视图中。 创建平面 步骤 3 保持其长度和宽度 segs 为 80。 段 步骤 4 打开修改器列表…

算法leetcode|64. 最小路径和(rust重拳出击)

文章目录 64. 最小路径和:样例 1:样例 2:提示: 分析:题解:rust:go:c:python:java: 64. 最小路径和: 给定一个包含非负整数的 m x n 网…

32 QFile文件读写

案例:使用LineEdit和TextEdit实现读取文件并显示文件内容 展示: 代码: #include "widget.h" #include "ui_widget.h" #include "QFileDialog" #include "QMessageBox" #include "QFile" …

2、nacos 2.1.0注册中心原理及源码分析

一、为什么有这课程 Spring Cloud Alibaba 新版本中Seata 1.5.2和Nacos 2.1.0 在性能和使用方面都有很大提升,这节课将从使用和源码的角度详细讲解这两个框架。 二、设计注册中心 1、分布式框架的注意点:三高架构 高可用 高可用性(High Av…

智慧园区智能照明控制系统解决方案

1、概述 园区照明比较复杂,办公建筑、生产车间和园区道路、景观照明等类型比较多,而且对照明控制方式要求不一样。所以合理使用照明控制系统,针对不同建筑不同场景使用不同的控制策略,大程度使用自然光照明达到节省照明用电&#…

科技资讯|苹果开放Vision Pro头显开发套件申请,此前曝光三款电池

苹果今天宣布面向开发人员,正式接受 Vision Pro 头显开发套件申请,从而帮助其开发和测试应用程序。 苹果官方页面介绍,开发人员在获得 Vision Pro 头显开发套件之外,还可以获得设备设置和入门方面的帮助,与 Apple 专…

谷粒商城篇章5 ---- P173-P192 ---- 检索服务【分布式高级篇二】

目录 1 检索服务 1.1 搭建页面环境 1.1.1 引入依赖 1.1.2 将检索页面放到gulimall-search的src/main/resources/templates/目录下 1.1.3 调整搜索页面 1.1.4 将静态资源放到linux的nginx相关映射目录下/root/docker/nginx/html/static/ search/ 1.1.5 SwitchHosts配置域…