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