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.confirm({
  title: '标题',
  message: '弹窗内容',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<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
});

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

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

import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
const beforeClose = (action) => new Promise((resolve) => {
  setTimeout(() => {
    if (action === 'confirm') {
      resolve(true);
    } else {
      // 拦截取消操作
      resolve(false);
    }
  }, 1000);
});
Dialog.confirm({
  title: '标题',
  message: '弹窗内容'
  beforeClose
});

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

<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({ show: false });
  },
});

API

方法

Options

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

OpenType Options

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

Props

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

OpenType Props

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

Events

Slot