vant/packages/dialog/zh-CN.md

Dialog 弹出框

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

使用指南

import { Dialog } from 'vant';

Vue.use(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 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法

export default {
  mounted() {
    this.$dialog.alert({
      message: '弹窗内容'
    });
  }
}

方法

方法名	参数	返回值	介绍
Dialog	options	Promise	展示弹窗
Dialog.alert	options	Promise	展示消息提示弹窗
Dialog.confirm	options	Promise	展示消息确认弹窗
Dialog.setDefaultOptions	options	void	修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions	-	void	重置默认配置，对所有 Dialog 生效
Dialog.close	-	void	关闭弹窗

Options

参数	说明	类型	默认值
title	标题	String	-
message	内容	String	-
className	自定义类名	`String	Array
showConfirmButton	是否展示确认按钮	Boolean	true
showCancelButton	是否展示取消按钮	Boolean	false
confirmButtonText	确认按钮的文案	String	确认
cancelButtonText	取消按钮的文案	String	取消
overlay	是否展示蒙层	Boolean	true
closeOnClickOverlay	点击蒙层时是否关闭弹窗	Boolean	false
lockScroll	是否锁定背景滚动	Boolean	true
beforeClose	关闭前的回调函数， 调用 done() 后关闭弹窗， 调用 done(false) 可以阻止弹窗关闭	(action: string, done: function) => void	-

高级用法

如果需要在弹窗内实现更复杂的交互，可以通过组件形式来调用 Dialog，调用前需要通过 Vue.use 注册组件

<van-dialog
  v-model="show"
  show-cancel-button
  :before-close="beforeClose"
>
  <van-field
    v-model="username"
    label="用户名"
    placeholder="请输入用户名"
  />
  <van-field
    v-model="password"
    type="password"
    label="密码"
    placeholder="请输入密码"
  />
</van-dialog>

export default {
  data() {
    return {
      show: false,
      username: '',
      password: ''
    };
  },
  
  methods: {
    beforeClose(action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000);
      } else {
        done();
      }
    }
  }
}

API

参数	说明	类型	默认值
v-model	是否显示弹窗	Boolean	-
title	标题	String	-
message	内容	String	-
show-confirm-button	是否展示确认按钮	Boolean	true
show-cancel-button	是否展示取消按钮	Boolean	false
confirm-button-text	确认按钮的文案	String	确认
cancel-button-text	取消按钮的文案	String	取消
overlay	是否展示蒙层	Boolean	true
close-on-click-overlay	点击蒙层时是否关闭弹窗	Boolean	false
lock-scroll	是否锁定背景滚动	Boolean	true
before-close	关闭前的回调函数， 调用 done() 后关闭弹窗， 调用 done(false) 可以阻止弹窗关闭	(action: string, done: function) => void	-
get-container	指定挂载的节点，可以传入 CSS 选择器， 或一个返回 DOM 节点的函数	`String	() => HTMLElement`

Event

事件	说明	回调参数
confirm	点击确认按钮时触发	-
cancel	点击取消按钮时触发	-

更新日志

版本	类型	内容
1.3.2	improvement	更新按钮颜色
1.1.8	feature	支持单独传入 title 属性
1.1.7	feature	支持 className 属性
1.1.7	improvement	优化内容为空时的样式
1.1.6	feature	新增 get-container 属性
1.1.6	feature	beforeClose 支持通过回调参数控制关闭动作
1.1.5	improvement	优化按钮文字选中状态
1.0.6	feature	新增 before-close 属性, 支持异步关闭
1.0.4	bugfix	修复未初始化时 close 方法报错的问题
0.12.4	feature	新增 setDefaultOptions 方法
0.11.4	feature	支持 this.$dialog 调用
0.10.6	bugfix	修复按钮文字未重置的问题
0.8.7	feature	支持通过组件的方式进行调用
0.8.5	bugfix	修复 z-index 错误的问题