在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层级,然后就成功修改了样式啦

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐