弹出框

介绍

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

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

注意：使用时必须在所使用的页面加入如下内容（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
	}
},

方法

Options

Events

Slots