vue3修改vant框架中的dialog弹出框样式

在vue3中，通过showConfirmDialog函数方式使用Dialog弹窗，由于他是挂载到根节点(#app)上，所以没有办法直接在css中修改样式。看了官方文档之后，发现可以使用teleport这个属性值，修改dialog组件挂载的节点。

若同时有多个dialog弹窗样式不同且挂载到同一节点，则可以通过className属性自定义类名。然后在css中通过各自类名修改样式

代码示例：

<div class="container-zjbs"></div>

	showConfirmDialog({
        title: "关闭",
        message: `您是否关闭?`,
        confirmButtonText: "关闭",
        cancelButtonText: "等一等",
        className: "close",
        teleport: ".container-zjbs",
      })
        .then(async () => {
          // 自定义代码
          });
        })

	showConfirmDialog({
            title: "切换",
            message: `是否切换?`,
            teleport: ".container-zjbs",
            className: "check",
          })
            .then(async () => {
              // 自定义代码
            })

.container-zjbs {
  :deep(.close) {
    width: 280px;
    .van-dialog__header {
      display: none;
    }
    .van-dialog__content {
      .van-dialog__message {
        padding: 24px 16px 16px 16px;
        font-size: 17px;
        font-weight: 400;
        color: #333333;
      }
    }
    .van-dialog__footer {
      /* 颠倒确认和取消位置 */
      flex-direction: row-reverse; 	
      .van-button__content {
        font-size: 17px;
        font-weight: 400;
      }
    }
  }
  :deep(.check) {
    width: 280px;
    .van-dialog__header {
      font-size: 17px;
      font-weight: 400;
      padding-top: 16px;
    }
    .van-dialog__content {
      .van-dialog__message {
        padding: 12px 43.5px 12px 43.5px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
      }
    }
    .van-dialog__footer {
      .van-button__content {
        font-size: 17px;
        font-weight: 400;
      }
    }
  }
}

若同时有多个页面都需要修改dialog样式，不同页面中挂载的节点类名需要不同！！！