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

序:

        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();

猜你喜欢

转载自blog.csdn.net/xuelang532777032/article/details/131933756