vant/docs/examples-docs/en-US/dialog.md

Dialog

Install

import { Dialog } from 'vant';

Usage

消息提示

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

:::demo 消息提示

<van-button @click="onClickAlert">Alert</van-button>
<van-button @click="onClickAlert2">无标题 Alert</van-button>

export default {
  methods: {
    onClickAlert() {
      Dialog.alert({
        title: '标题',
        message: '弹窗内容'
      }).then(() => {
        // on close
      });
    },

    onClickAlert2() {
      Dialog.alert({
        message: '弹窗内容'
      }).then(() => {
        // on close
      });
    }
  }
};

:::

消息确认

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

:::demo 消息确认

<van-button @click="onClickConfirm">Confirm</van-button>

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

:::

方法

方法名	Attribute	返回值	介绍
Dialog.alert	options	Promise	展示消息提示弹窗
Dialog.confirm	options	Promise	展示消息确认弹窗
Dialog.close	-	void	关闭弹窗

Options

Attribute	Description	Type	Default	Accepted Values
title	标题	String	-	-
message	内容	String	-	-
showConfirmButton	是否展示确认按钮	Boolean	true	-
showCancelButton	是否展示取消按钮	Boolean	false	-
confirmButtonText	确认按钮的文案	String	确认	-
cancelButtonText	取消按钮的文案	String	取消	-
overlay	是否展示蒙层	Boolean	true	-
closeOnClickOverlay	点击蒙层时是否关闭弹窗	Boolean	false	-
lockOnScroll	是否禁用背景滚动	Boolean	true	-