Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作

弹出框组件支持函数调用和组件调用两种方式

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "van-dialog": "@vant/weapp/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
});

圆角样式

样式为圆角风格。

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

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

消息确认

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

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

异步关闭

设置asyncClose属性开启异步关闭，开启后可以手动调用Dialog.close方法关闭弹窗

Dialog.confirm({
  title: '标题',
  message: '弹窗内容'
  asyncClose: true
})
  .then(() => {
    setTimeout(() => {
      Dialog.close();
    }, 1000);
  })
  .catch(() => {
    Dialog.close();
  });

组件调用

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

<van-dialog
  use-slot
  title="标题"
  show="{{ show }}"
  show-cancel-button
  confirm-button-open-type="getUserInfo"
  bind:close="onClose"
  bind:getuserinfo="getUserInfo"
>
  <image src="https://img.yzcdn.cn/1.jpg" />
</van-dialog>

Page({
  data: {
    show: true,
  },
  getUserInfo(event) {
    console.log(event.detail);
  },
  onClose() {
    this.setData({ close: false });
  },
});

API

方法

Options

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

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

Props

通过组件调用 Dialog 时，支持以下 Props:

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

Events

Slot