naive-ui's dialog.warning closes and prevents closing

sequence:

        1. If you are stuck and the blogger does not write a blog, you can leave a message on the blogger's public account: "Programmer Wild Area" . If the blogger sees that he has time, he will try it for you.

        2. The blogger mainly talks about how to actively close the dialog and prevent the dialog from automatically closing.

Notice! ! ! ! Come on, you have to introduce it first

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

Case 1: First use the official OK button

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
							}
						}),
					]
				),
				
			})	

in onPositiveClick,

If return false, it will not be closed.

return true will close

Case 2: Write your own close button

            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: () => "提交" }),
					]
				)
			})	

Did you see the code? dialogObj.destroy(); is closed

The premise is that you must first define let dialogObj=dialog.warning({

3. One more thing, how to close all dialog.warning?

Remember that the introduction at the beginning of the blog post needs to be written into the code.

dialog.destroyAll();

Guess you like

Origin blog.csdn.net/xuelang532777032/article/details/131933756