Dialog 弹出框

Dialog 组件支持函数调用和组件调用两种形式

使用指南

在 app.json 或 index.json 中引入组件

"usingComponents": {
  "van-dialog": "path/to/vant-weapp/dist/dialog/index"
}

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮

<van-dialog id="van-dialog" />

import Dialog from 'path/to/vant-weapp/dist/dialog/dialog';
Dialog.alert({
  title: '标题',
  message: '弹窗内容'
}).then(() => {
  // on close
});
Dialog.alert({
  message: '弹窗内容'
}).then(() => {
  // on close
});

消息确认

用于确认消息，包含取消和确认按钮

Dialog.confirm({
  title: '标题',
  message: '弹窗内容'
}).then(() => {
  // on confirm
}).catch(() => {
  // on cancel
});

组件调用

通过组件调用 Dialog 时，可以实现自定义弹窗内容、异步关闭、监听微信开放能力回调事件，具体可以参考下面的示例

<van-dialog
  use-slot
  async-close
  show="{{ show }}"
  show-cancel-button
  confirm-button-open-type="getUserInfo"
  bind:close="onClose"
  bind:getuserinfo="getUserInfo"
>
<van-field
  value="{{ username }}"
  label="用户名"
  placeholder="请输入用户名"
/>
<van-field
  value="{{ password }}"
  type="password"
  label="密码"
  :border="false"
  placeholder="请输入密码"
/>
</van-dialog>

Page({
  data: {
    show: true,
    username: '',
    password: ''
  },
  onClose(event) {
    if (event.detail === 'confirm') {
      // 异步关闭弹窗
      setTimeout(() => {
        this.setData({
          show: false
        });
      }, 1000);
    } else {
      this.setData({
        show: false
      });
    }
  }
});

方法

Options

通过函数调用 Dialog 时，支持传入以下选项：

API

通过组件调用 Dialog 时，支持以下 API：

Event

更新日志

原文: https://youzan.github.io/vant-weapp/#/dialog