Veyra

MessageBox 消息弹框 ​

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

TIP

从设计上来说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。

消息提示 ​

调用 VrMessageBox.alert 方法以打开 alert 框。

<script setup lang="ts">
	import { VrMessageBox, VrMessage } from 'veyra'

	function openAlert() {
		VrMessageBox.alert('This is a message', 'Title')
			.then((action) => {
				VrMessage.info(`action: ${action}`)
			})
			.catch((action) => {
				VrMessage.warning(`action: ${action}`)
			})
	}
</script>

<template>
	<vr-button @click="openAlert" plain> Click to open the Alert</vr-button>
</template>

确认消息 ​

调用 VrMessageBox.confirm 方法以打开 confirm 框。

<script setup lang="ts">
	import { VrMessageBox, VrMessage } from 'veyra'

	function openConfirm() {
		VrMessageBox.confirm(
			'proxy will permanently delete the file. Continue?',
			'Warning',
			{ type: 'warning' }
		)
			.then((action) => {
				VrMessage.info(`action: ${action}`)
			})
			.catch((action) => {
				VrMessage.warning(`action: ${action}`)
			})
	}
</script>

<template>
	<vr-button @click="openConfirm" plain> Click to open the Confirm</vr-button>
</template>

提交内容 ​

调用 VrMessageBox.prompt 方法以打开 prompt 框。

<script setup lang="ts">
	import { VrMessageBox, VrMessage } from 'veyra'

	function openConfirm() {
		VrMessageBox.prompt('Place input your name', 'Tip', { type: 'info' })
			.then(({ value }) => {
				VrMessage.info(`your name is: ${value}`)
			})
			.catch((action) => {
				VrMessage.warning(`action: ${action}`)
			})
	}
</script>

<template>
	<vr-button @click="openConfirm" plain> Click to open the Confirm</vr-button>
</template>

使用 VNode ​

message 可以是 VNode。

<script setup lang="ts">
	import { h } from 'vue'
	import { VrMessageBox } from 'veyra'

	function open1() {
		VrMessageBox({
			title: 'Message',
			message: h('p', null, [
				h('span', null, 'Message can be '),
				h('i', { style: 'color: teal' }, 'VNode'),
			]),
		})
	}
</script>

<template>
	<vr-button @click="open1" plain>Common VNode</vr-button>
	<!-- <vr-button @click="open2" plain>Dynamic props</vr-button> -->
</template>

个性化 ​

可以通过配置 VrMessageBox 的参数来实现一些个性化需求（options 参数见下文）。

<script setup lang="ts">
	import { h } from 'vue'
	import { VrMessage, VrMessageBox } from 'veyra'
	import { delay } from 'lodash-es'

	async function openMsgBox() {
		try {
			const action = await VrMessageBox({
				title: 'Message',
				message: h('p', null, [
					h('span', null, 'Message can be '),
					h('i', { style: 'color: teal' }, 'VNode'),
				]),
				showCancelButton: true,
				confirmButtonText: 'Yes',
				cancelButtonText: 'No',
				type: 'danger',
				icon: 'trash',
				beforeClose(action, instance, done) {
					if (action !== 'confirm') {
						done()
						return
					}

					instance.confirmButtonLoading = true
					instance.confirmButtonText = 'Loading...'
					delay(() => {
						done()
						delay(() => (instance.confirmButtonLoading = false), 1000)
					}, 3000)
				},
			})

			VrMessage.info(`action : ${action}`)
		} catch (action) {
			VrMessage.warning(`action : ${action}`)
		}
	}
</script>

<template>
	<vr-button @click="openMsgBox" plain>Click to open Message Box</vr-button>
</template>

内容居中 ​

消息弹框支持使用居中布局。

center 参数为 true 时，消息弹框内容会居中。

<script setup lang="ts">
	import { VrMessage, VrMessageBox } from 'veyra'

	function openMsgBox() {
		VrMessageBox.confirm(
			'proxy will permanently delete the file. Continue?',
			'Warning',
			{
				type: 'warning',
				center: true,
				// 这里展示一下 不用 Promise 写法的时候
				callback(action) {
					if (action === 'confirm') {
						VrMessage.info(action)
					} else {
						VrMessage.warning(action as string)
					}
				},
			}
		)
	}
</script>

<template>
	<vr-button @click="openMsgBox" plain>Click to open Message Box</vr-button>
</template>

全局方法 ​

VrMessageBox 提供了全局方法 VrMessageBox.alert、VrMessageBox.confirm、VrMessageBox.prompt，用于在需要时弹出消息弹框。 如果完整引入了 VricUI, 则会为 app.config.globalProperties 添加全局方法 $msgbox、$alert、$confirm、$prompt。 在 Vue 实例中可以作为 this.$msgbox、this.$alert、this.$confirm、this.$prompt 使用。

单独引用 ​

typescript
import { VrMessageBox } from 'veyra'

MessageBox API ​

Options ​

NameDescriptionTypeDefault
titleMessageBox 标题string--
messageMessageBox 消息正文内容string | VNode | () => VNode--
typeMessageBox 类型,用于图标展示enum - 'success' | 'warning' | 'info' | 'error' |'danger'--
iconMessageBox 图标string--
callbackMessageBox 关闭回调函数(action: MessageBoxAction) => void--
show-close是否显示关闭按钮booleantrue
before-close关闭前的回调函数，会暂停 MessageBox 的关闭(action: MessageBoxAction,instance:MessageBoxOptions,done:()=>void) => void--
show-confirm-button是否显示确认按钮booleantrue
show-cancel-button是否显示取消按钮booleanfalse
confirm-button-text确认按钮的文字stringOK
cancel-button-text取消按钮的文字stringCancel
confirm-button-type确认按钮的类型stringprimary
cancel-button-type取消按钮的类型string--
confirm-button-disabled是否禁用确认按钮booleanfalse
confirm-button-loading是否显示确认按钮的加载状态booleanfalse
cancel-button-disabled是否禁用取消按钮booleanfalse
cancel-button-loading是否显示取消按钮的加载状态booleanfalse
close-on-click-modal点击遮罩是否允许关闭booleantrue
show-input是否显示输入框booleanfalse
input-placeholder输入框的提示文字stringPlace input...
input-type输入框的类型stringtext
input-value输入框的初始值string''
center是否居中显示booleanfalse
round-button是否显示圆角按钮booleanfalse
button-size按钮大小，可选值为 default、large 、smallstringdefault