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

最新推荐文章于 2024-01-08 20:45:00 发布

原创最新推荐文章于 2024-01-08 20:45:00 发布 · 1.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端

vue 同时被 2 个专栏收录

112 篇文章

订阅专栏

TypeScript

45 篇文章

订阅专栏

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

序：

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