在methods中使用Dialog()函数时,具体写法如下
Dialog.confirm({
title: "",
confirmButtonColor: "#ee0a24",//确认按钮上文字的颜色,默认为#ee0a24
message: "确认删除此案例吗?",//二次弹框的message内容
})
.then(() => {
// on confirm
//点确定后执行这里
})
.catch(() => {
// on cancel
//点取消后执行这里
});
因为这里dialog是个函数,也就表明是在某些事件中触发才会调用这个方法,所以当时我认为这个dialog会渲染在调用方法的父级Dom中,结果打开网页后发现Dialog渲染在了body上,如图
这时我想要对dialog的样式进行修改时,发现写在哪里都修改不了,问题就是因为这个dialog渲染在了body上,目前获取不到。
所以去看了vant2的属性,因为这里我用到的是dialog函数,所以在options找到这个挂载的属性发现有一个getContainer的函数可以使用,这个函数就是要将这个dialog挂载到某个位置
所以在dialog函数中,我增加了一个getContainer,并且把dialog挂载到了.myput这个类中
Dialog.confirm({
title: "",
confirmButtonColor: "#ffffff",//此处将确认按钮上文字的颜色改为#ffffff
message: "确认删除此案例吗?",
getContainer: ".myput"
})
挂载之后,浏览器渲染后的结构是这样的,由此可见现在dialog已经在myput里了
接下来改样式的话写在.myput类中就好啦,比如现在要更改确定按钮的背景颜色
.myput{
::v-deep .van-dialog__confirm {
background-color: #00bcd4;
}
}
样式就从原先的样式改成新的样子啦
更改前
更改后
PS:在csdn上搜索了很多别的方法都没有成功,最后发现是dialog的挂载问题,之后更改了挂载的dom层级,然后就成功修改了样式啦