vant框架Dialog样式的修改方法此处使用的是通过函数调用 Dialog的样式修改方法

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

本篇文章来至：学新通