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