弹出框

介绍

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

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

注意:使用时必须在所使用的页面加入如下内容(ref名称不可更改):

<z-dialog ref="zDialog" />

函数调用

Dialog 是一个函数,调用后会直接在页面中弹出相应的模态框。

this.$dialog.alert({
	title: '标题',
	message: '我是zebra-ui里的弹出框,我长得很漂亮',
});

组件调用

组件内部提供了options参数来对模态框进行配置。

<z-dialog
	:options="{'title':'标题','useSlot':true,'show':show,'show-cancel-button':true,'confirm-button-open-type':'getUserInfo'}"
	@close="onClose" @getuserinfo="getUserInfo">
	<view class="demo-dialog-text">
		自定义内容
	</view>
</z-dialog>

代码演示

消息提示

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

this.$dialog.alert({
	title: '标题',
	message: '我是zebra-ui里的弹出框,我长得很漂亮',
});

this.$dialog.alert({
	message: '我是zebra-ui里的弹出框,我长得很漂亮',
});

消息确认

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

this.$dialog.confirm({
	title: '标题',
	message: '我是zebra-ui里的弹出框,我长得漂亮吗?',
});

按钮

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

this.$dialog.alert({
	title: '标题',
	theme: 'round-button',
	message: '我是zebra-ui里的弹出框,我长得很漂亮',
});

异步关闭

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

const beforeClose = (action) =>
	new Promise((resolve) => {
		setTimeout(() => {
			if (action === 'confirm') {
				resolve(true);
			} else {
				// 拦截取消操作
				resolve(false);
				this.$toast("拦截取消操作")
			}
		}, 1000);
	});
this.$dialog.confirm({
	title: '标题',
	message: '我是zebra-ui里的弹出框,我长得很漂亮',
	beforeClose,
});

组件调用

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

<z-dialog
	:options="{'title':'标题','useSlot':true,'show':show,'show-cancel-button':true,'confirm-button-open-type':'getUserInfo'}"
	@close="onClose" @getuserinfo="getUserInfo">
	<view class="demo-dialog-text">
		自定义内容
	</view>
</z-dialog>
data() {
	return {
		show: false
	}
},

API

方法

方法名 说明 参数 返回值
$dialog 展示弹窗 options Promise
$dialog.alert 展示消息提示弹窗 options Promise
$dialog.confirm 展示消息确认弹窗 options Promise
$dialog.close 关闭弹窗 - void

Options

参数 说明 类型 可选值 默认值
title 标题 string - -
width 弹窗宽度,默认单位为px number|string 320px
message 文本内容,支持通过\n换行 string -
messageAlign 内容对齐方式 string left right center
theme 按钮样式 string default
showConfirmButton 是否展示确认按钮 boolean true
showCancelButton 是否展示取消按钮 boolean false
confirmButtonText 确认按钮文案 string 确认
confirmButtonColor 确认按钮颜色 string #08c6c8
cancelButtonText 取消按钮文案 string 取消
cancelButtonColor 取消按钮颜色 string black
overlay 是否展示遮罩层 boolean true
overlayStyle 自定义遮罩层样式 object -
closeOnClickOverlay 是否在点击遮罩层后关闭弹窗 boolean false
beforeClose 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise (action)=>boolean|Promise -
transition 动画名称 string fade none scale
transition 确认按钮的开放能力,具体支持可参考 uniapp官方文档 string -

Events

事件名 回调参数 说明
close event object - event event.detail: 触发关闭事件的来源,枚举为confirm,cancel,overlay 弹窗关闭时触发
confirm event object - event 点击确认按钮时触发
cancel event object - event 点击取消按钮时触发

Slots

名称 说明 Bindings
title 自定义title显示内容,如果设置了title属性则不生效