Dialog 弹出框

介绍

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

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

函数调用

Dialog 是一个函数而不是组件,因此可以直接调用,展示对应的提示弹窗

  1. import{Dialog}from'vant';
  2. Dialog({ message:'提示'});

组件调用

通过组件调用 Dialog 时,可以通过下面的方式进行注册

  1. import{Dialog}from'vant';
  2. // 全局注册
  3. Vue.use(Dialog);
  4. // 局部注册
  5. exportdefault{
  6. components:{
  7. [Dialog.Component.name]:Dialog.Component
  8. }
  9. }

代码演示

消息提示

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

  1. Dialog.alert({
  2. title:'标题',
  3. message:'弹窗内容'
  4. }).then(()=>{
  5. // on close
  6. });
  7. Dialog.alert({
  8. message:'弹窗内容'
  9. }).then(()=>{
  10. // on close
  11. });

消息确认

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

  1. Dialog.confirm({
  2. title:'标题',
  3. message:'弹窗内容'
  4. }).then(()=>{
  5. // on confirm
  6. }).catch(()=>{
  7. // on cancel
  8. });

异步关闭

  1. function beforeClose(action,done){
  2. if(action ==='confirm'){
  3. setTimeout(done,1000);
  4. }else{
  5. done();
  6. }
  7. }
  8. Dialog.confirm({
  9. title:'标题',
  10. message:'弹窗内容',
  11. beforeClose
  12. });

全局方法

引入 Dialog 组件后,会自动在 Vue 的 prototype 上挂载 $dialog 方法,在所有组件内部都可以直接调用此方法

  1. exportdefault{
  2. mounted(){
  3. this.$dialog.alert({
  4. message:'弹窗内容'
  5. });
  6. }
  7. }

组件调用

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

  1. <van-dialog
  2. v-model="show"
  3. title="标题"
  4. show-cancel-button
  5. >
  6. <imgsrc="https://img.yzcdn.cn/1.jpg">
  7. </van-dialog>
  1. exportdefault{
  2. data(){
  3. return{
  4. show:false
  5. };
  6. }
  7. }

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置,对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置,对所有 Dialog 生效
Dialog.close-void关闭弹窗

Options

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

参数说明类型默认值版本
title标题String--
message文本内容,支持通过\n换行String--
messageAlign内容对齐方式,可选值为leftrightStringcenter1.5.0
className自定义类名String | Array | Object-1.1.7
showConfirmButton是否展示确认按钮Booleantrue-
showCancelButton是否展示取消按钮Booleanfalse-
cancelButtonText取消按钮文案String取消-
cancelButtonColor取消按钮颜色String#0001.6.14
confirmButtonText确认按钮文案String确认-
confirmButtonColor确认按钮颜色String#1989fa1.6.14
overlay是否展示遮罩层Booleantrue-
closeOnClickOverlay点击遮罩层时是否关闭弹窗Booleanfalse-
lockScroll是否锁定背景滚动Booleantrue-
beforeClose关闭前的回调函数,调用 done() 后关闭弹窗,调用 done(false) 阻止弹窗关闭(action, done) => void-1.1.6
getContainer指定挂载的节点,可以传入选择器,或一个返回节点的函数String | () => HTMLElementbody1.6.11

Props

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

参数说明类型默认值版本
v-model是否显示弹窗Boolean--
title标题String--
message内容String--
message-align内容对齐方式,可选值为leftrightStringcenter1.5.0
show-confirm-button是否展示确认按钮Booleantrue-
show-cancel-button是否展示取消按钮Booleanfalse-
cancel-button-text取消按钮文案String取消-
cancel-button-color取消按钮颜色String#0001.6.14
confirm-button-text确认按钮文案String确认-
confirm-button-color确认按钮颜色String#1989fa1.6.14
overlay是否展示遮罩层Booleantrue-
close-on-click-overlay是否在点击遮罩层后关闭Booleanfalse-
lock-scroll是否锁定背景滚动Booleantrue-
before-close关闭前的回调函数,调用 done() 后关闭弹窗,调用 done(false) 阻止弹窗关闭(action, done) => void-1.1.6
get-container指定挂载的节点,可以传入选择器,或一个返回节点的函数String | () => HTMLElementbody1.1.6

Events

通过组件调用 Dialog 时,支持以下事件:

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

Dialog 弹出框 - 图1