Vant Dialog 弹出框

2021-01-05 10:36 更新

介绍

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

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

函数调用

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

import { Dialog } from 'vant';

Dialog({ message: '提示' });

组件调用

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

import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);

// 局部注册
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
}

代码演示

消息提示

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

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

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

消息确认

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

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

异步关闭

function beforeClose(action, done) {
  if (action === 'confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
  beforeClose
});

全局方法

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

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

组件调用

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

<van-dialog v-model="show" title="标题" show-cancel-button>
  <img src="https://img.yzcdn.cn/vant/apple-3.jpg" rel="external nofollow" >
</van-dialog>
export default {
  data() {
    return {
      show: false
    };
  }
}

API

方法

方法名说明参数返回值
Dialog展示弹窗optionsPromise
Dialog.alert展示消息提示弹窗optionsPromise
Dialog.confirm展示消息确认弹窗optionsPromise
Dialog.setDefaultOptions修改默认配置,对所有 Dialog 生效optionsvoid
Dialog.resetDefaultOptions重置默认配置,对所有 Dialog 生效-void
Dialog.close关闭弹窗-void

Options

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

参数说明类型默认值
title标题string-
width v2.2.7弹窗宽度,默认单位为pxnumber | string320px
message文本内容,支持通过\n换行string-
messageAlign内容对齐方式,可选值为left rightstringcenter
className自定义类名any-
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮文案string确认
confirmButtonColor确认按钮颜色string#1989fa
cancelButtonText取消按钮文案string取消
cancelButtonColor取消按钮颜色stringblack
overlay是否展示遮罩层booleantrue
overlayClass v2.2.7自定义遮罩层类名string-
overlayStyle v2.2.7自定义遮罩层样式object-
closeOnPopstate v2.0.5是否在页面回退时自动关闭booleanfalse
closeOnClickOverlay是否在点击遮罩层后关闭弹窗booleanfalse
lockScroll是否锁定背景滚动booleantrue
beforeClose关闭前的回调函数,
调用 done() 后关闭弹窗,
调用 done(false) 阻止弹窗关闭
(action, done) => void-
transition v2.2.6动画类名,等价于 transition 的name属性string-
getContainer指定挂载的节点,用法示例string | () => Elementbody

Props

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

参数说明类型默认值
v-model是否显示弹窗boolean-
title标题string-
width v2.2.7弹窗宽度,默认单位为pxnumber | string320px
message文本内容,支持通过\n换行string-
message-align内容对齐方式,可选值为left rightstringcenter
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮文案string确认
confirm-button-color确认按钮颜色string#1989fa
cancel-button-text取消按钮文案string取消
cancel-button-color取消按钮颜色stringblack
overlay是否展示遮罩层booleantrue
overlay-class v2.2.7自定义遮罩层类名string-
overlay-style v2.2.7自定义遮罩层样式object-
close-on-popstate v2.0.5是否在页面回退时自动关闭booleanfalse
close-on-click-overlay是否在点击遮罩层后关闭弹窗booleanfalse
lazy-render是否在显示弹层时才渲染节点booleantrue
lock-scroll是否锁定背景滚动booleantrue
before-close关闭前的回调函数,
调用 done() 后关闭弹窗,
调用 done(false) 阻止弹窗关闭
(action, done) => void-
transition v2.2.6动画类名,等价于 transtion 的name属性string-
get-container指定挂载的节点,用法示例string | () => Element-

Events

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

事件说明回调参数
confirm点击确认按钮时触发-
cancel点击取消按钮时触发-
open打开弹窗时触发-
opened打开弹窗且动画结束后触发-
close关闭弹窗时触发-
closed关闭弹窗且动画结束后触发-

Slots

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

名称说明
default自定义内容
title自定义标题


实例演示

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部