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

45 篇文章 2 订阅
本文介绍了如何在NaiveUI框架中主动关闭dialog,包括使用`createDiscreteApi`创建API,通过返回`false`阻止默认关闭以及添加自定义关闭按钮调用`dialogObj.destroy()`方法来关闭对话框。同时,提供了阻止dialog自动关闭的示例代码,并提到了`dialog.destroyAll()`用于关闭所有dialog警告。
摘要由CSDN通过智能技术生成

序:

        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();
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪狼之夜

打个赏,让博主知道博文没白写

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值