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

  • 13
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值