消息确认服务 AsamMessageBox

vue

<template>
	<div class="actions">
		<AsamButton type="default" :disabled="active" native-type="button" @click="alert"
			>提示</AsamButton
		>
		<AsamButton type="default" :disabled="active" native-type="button" @click="confirm"
			>确认归档</AsamButton
		>
		<AsamButton type="default" :disabled="active" native-type="button" @click="prompt"
			>输入名称</AsamButton
		>
	</div>
	<p class="example-paragraph" role="status">{{ result }}</p>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamMessageBoxBasicDemo' });
import { ref, onBeforeUnmount } from 'vue';
import { AsamButton, AsamMessageBox } from '@asam-ui/ui';
const result = ref('等待操作');
const active = ref(false);
const alert = async () => {
	active.value = true;
	try {
		await AsamMessageBox.alert('本地草稿已保存', '提示', { buttonSize: 'big' });
		result.value = '已阅读';
	} catch {
		result.value = '提示关闭';
	} finally {
		active.value = false;
	}
};
const confirm = async () => {
	active.value = true;
	try {
		await AsamMessageBox.confirm('确认归档这条记录？', '归档确认', {
			distinguishCancelAndClose: true,
			buttonSize: 'small'
		});
		result.value = '已确认归档';
	} catch (action) {
		result.value = String(action);
	} finally {
		active.value = false;
	}
};
const prompt = async () => {
	active.value = true;
	try {
		const data = await AsamMessageBox.prompt('请输入至少两个字的名称', '命名', {
			inputPattern: /^.{2,}$/,
			inputErrorMessage: '名称至少两个字',
			buttonSize: 'large'
		});
		result.value = data.value;
	} catch {
		result.value = '输入已取消';
	} finally {
		active.value = false;
	}
};
onBeforeUnmount(() => {
	if (active.value) AsamMessageBox.close();
});
</script>

<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}

.panel {
	padding: var(--asam-space-lg);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div class="actions">
		<AsamButton type="default" :disabled="active" native-type="button" @click="alert"
			>提示</AsamButton
		>
		<AsamButton type="default" :disabled="active" native-type="button" @click="confirm"
			>确认归档</AsamButton
		>
		<AsamButton type="default" :disabled="active" native-type="button" @click="prompt"
			>输入名称</AsamButton
		>
	</div>
	<p class="example-paragraph" role="status">{{ result }}</p>
</template>

<script setup>
defineOptions({ name: 'AsamMessageBoxBasicDemo' });
import { ref, onBeforeUnmount } from 'vue';
import { AsamButton, AsamMessageBox } from '@asam-ui/ui';
const result = ref('等待操作');
const active = ref(false);
const alert = async () => {
	active.value = true;
	try {
		await AsamMessageBox.alert('本地草稿已保存', '提示', { buttonSize: 'big' });
		result.value = '已阅读';
	} catch {
		result.value = '提示关闭';
	} finally {
		active.value = false;
	}
};
const confirm = async () => {
	active.value = true;
	try {
		await AsamMessageBox.confirm('确认归档这条记录？', '归档确认', {
			distinguishCancelAndClose: true,
			buttonSize: 'small'
		});
		result.value = '已确认归档';
	} catch (action) {
		result.value = String(action);
	} finally {
		active.value = false;
	}
};
const prompt = async () => {
	active.value = true;
	try {
		const data = await AsamMessageBox.prompt('请输入至少两个字的名称', '命名', {
			inputPattern: /^.{2,}$/,
			inputErrorMessage: '名称至少两个字',
			buttonSize: 'large'
		});
		result.value = data.value;
	} catch {
		result.value = '输入已取消';
	} finally {
		active.value = false;
	}
};
onBeforeUnmount(() => {
	if (active.value) AsamMessageBox.close();
});
</script>

<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
	align-items: center;
}

.panel {
	padding: var(--asam-space-lg);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div class="actions">
		<label>
			<span>服务类型</span>
			<AsamSelect v-model="method" :disabled="active">
				<AsamOption value="alert" :label="'alert'">alert</AsamOption>
				<AsamOption value="confirm" :label="'确认'">确认</AsamOption>
				<AsamOption value="prompt" :label="'prompt'">prompt</AsamOption>
			</AsamSelect>
		</label>
		<label>
			<span>上下文</span>
			<AsamSelect v-model="contextMode" :disabled="active">
				<AsamOption value="explicit" :label="'显式当前 AppContext'"
					>显式当前 AppContext</AsamOption
				>
				<AsamOption value="installed" :label="'安装服务的默认上下文'"
					>安装服务的默认上下文</AsamOption
				>
				<AsamOption value="null" :label="'显式 null'">显式 null</AsamOption>
			</AsamSelect>
		</label>
		<AsamButton native-type="submit" type="default" :disabled="active" @click="open(false)"
			>使用 options 简写</AsamButton
		>
		<AsamButton native-type="submit" type="default" :disabled="active" @click="open(true)"
			>使用 title 重载</AsamButton
		>
	</div>
	<p class="example-paragraph" role="status">{{ result }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamMessageBoxServiceContextDemo' });
import { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamMessageBox } from '@asam-ui/ui';
import type { AsamMessageBoxActionHandlers, AsamMessageBoxOptions } from '@asam-ui/ui';

const context = getCurrentInstance()?.appContext;
const method = ref<'alert' | 'confirm' | 'prompt'>('alert');
const contextMode = ref<'explicit' | 'installed' | 'null'>('explicit');
const active = ref(false);
const result = ref('等待操作');
let cancelOwned: (() => void) | undefined;
const Content = defineComponent({
	setup() {
		const label = inject<string>('asam-message-box-context', '未设置宿主 provide');
		return () => h('span', { 'data-context-label': '' }, label);
	}
});
const cancel = () => cancelOwned?.();
const open = async (withTitle: boolean) => {
	if (active.value) return;
	active.value = true;
	result.value = '等待确认';
	const message = ({ cancel }: AsamMessageBoxActionHandlers) => {
		cancelOwned = cancel;
		return h('div', [
			h(Content),
			h(
				AsamButton,
				{ type: 'default', nativeType: 'button', onClick: cancel },
				'取消本例弹层'
			)
		]);
	};
	const options: AsamMessageBoxOptions = {
		buttonSize: 'default',
		inputPlaceholder: '输入本次确认值',
		distinguishCancelAndClose: true
	};
	const appContext =
		contextMode.value === 'installed'
			? undefined
			: contextMode.value === 'null'
				? null
				: context;
	try {
		const value = withTitle
			? await AsamMessageBox[method.value](message, '宿主上下文', options, appContext)
			: await AsamMessageBox[method.value](message, options, appContext);
		result.value =
			method.value === 'prompt' ? `confirmed: ${value.value}` : `resolved: ${value}`;
	} catch (action) {
		result.value = `rejected: ${String(action)}`;
	} finally {
		cancelOwned = undefined;
		active.value = false;
	}
};
onBeforeUnmount(cancel);
</script>
<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div class="actions">
		<label>
			<span>服务类型</span>
			<AsamSelect v-model="method" :disabled="active">
				<AsamOption value="alert" :label="'alert'">alert</AsamOption>
				<AsamOption value="confirm" :label="'确认'">确认</AsamOption>
				<AsamOption value="prompt" :label="'prompt'">prompt</AsamOption>
			</AsamSelect>
		</label>
		<label>
			<span>上下文</span>
			<AsamSelect v-model="contextMode" :disabled="active">
				<AsamOption value="explicit" :label="'显式当前 AppContext'"
					>显式当前 AppContext</AsamOption
				>
				<AsamOption value="installed" :label="'安装服务的默认上下文'"
					>安装服务的默认上下文</AsamOption
				>
				<AsamOption value="null" :label="'显式 null'">显式 null</AsamOption>
			</AsamSelect>
		</label>
		<AsamButton native-type="submit" type="default" :disabled="active" @click="open(false)"
			>使用 options 简写</AsamButton
		>
		<AsamButton native-type="submit" type="default" :disabled="active" @click="open(true)"
			>使用 title 重载</AsamButton
		>
	</div>
	<p class="example-paragraph" role="status">{{ result }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamMessageBoxServiceContextDemo' });
import { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamMessageBox } from '@asam-ui/ui';
const context = getCurrentInstance()?.appContext;
const method = ref('alert');
const contextMode = ref('explicit');
const active = ref(false);
const result = ref('等待操作');
let cancelOwned;
const Content = defineComponent({
	setup() {
		const label = inject('asam-message-box-context', '未设置宿主 provide');
		return () => h('span', { 'data-context-label': '' }, label);
	}
});
const cancel = () => cancelOwned?.();
const open = async (withTitle) => {
	if (active.value) return;
	active.value = true;
	result.value = '等待确认';
	const message = ({ cancel }) => {
		cancelOwned = cancel;
		return h('div', [
			h(Content),
			h(
				AsamButton,
				{ type: 'default', nativeType: 'button', onClick: cancel },
				'取消本例弹层'
			)
		]);
	};
	const options = {
		buttonSize: 'default',
		inputPlaceholder: '输入本次确认值',
		distinguishCancelAndClose: true
	};
	const appContext =
		contextMode.value === 'installed'
			? undefined
			: contextMode.value === 'null'
				? null
				: context;
	try {
		const value = withTitle
			? await AsamMessageBox[method.value](message, '宿主上下文', options, appContext)
			: await AsamMessageBox[method.value](message, options, appContext);
		result.value =
			method.value === 'prompt' ? `confirmed: ${value.value}` : `resolved: ${value}`;
	} catch (action) {
		result.value = `rejected: ${String(action)}`;
	} finally {
		cancelOwned = undefined;
		active.value = false;
	}
};
onBeforeUnmount(cancel);
</script>
<style scoped>
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-md);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import {
	AsamButton,
	AsamMessage,
	AsamMessageBox,
	type AsamMessageBoxAction as Action,
	type AsamMessageHandler
} from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

const open = () => {
	AsamMessageBox.alert('这是一条消息。', '标题', {
		// if you want to disable its autofocus
		// autofocus: false,
		confirmButtonText: '确认',
		callback: (action: Action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: `操作结果：${action}`
				})
			);
		}
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
const open = () => {
	AsamMessageBox.alert('这是一条消息。', '标题', {
		// if you want to disable its autofocus
		// autofocus: false,
		confirmButtonText: '确认',
		callback: (action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: `操作结果：${action}`
				})
			);
		}
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

const open = () => {
	AsamMessageBox.prompt('请输入电子邮箱', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		inputPattern:
			/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
		inputErrorMessage: '邮箱格式不正确'
	})
		.then(({ value }) => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: `你的邮箱是：${value}`
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消输入'
				})
			);
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
const open = () => {
	AsamMessageBox.prompt('请输入电子邮箱', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		inputPattern:
			/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
		inputErrorMessage: '邮箱格式不正确'
	})
		.then(({ value }) => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: `你的邮箱是：${value}`
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消输入'
				})
			);
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<div class="flex flex-wrap demo-gap">
		<AsamButton type="default" class="!ml-0" @click="open">普通 VNode</AsamButton>
		<AsamButton type="default" class="!ml-0" @click="open1">动态属性</AsamButton>
	</div>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessageBox, AsamSwitch } from '@asam-ui/ui';

import { h, ref } from 'vue';

const open = () => {
	AsamMessageBox({
		title: '消息',
		message: h('p', null, [
			h('span', null, '消息内容可以使用 '),
			h('i', { style: 'color: teal' }, 'VNode')
		])
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};

const open1 = () => {
	const checked = ref<boolean | string | number>(false);
	AsamMessageBox({
		title: '消息',
		// Should pass a function if VNode contains dynamic props
		message: () =>
			h(AsamSwitch, {
				modelValue: checked.value,
				'onUpdate:modelValue': (val: boolean | string | number) => {
					checked.value = val;
				}
			})
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap: wrap;
}
.demo-gap {
	gap: var(--asam-space-sm);
}
</style>

vue

<template>
	<div class="flex flex-wrap demo-gap">
		<AsamButton type="default" class="!ml-0" @click="open">普通 VNode</AsamButton>
		<AsamButton type="default" class="!ml-0" @click="open1">动态属性</AsamButton>
	</div>
</template>

<script setup>
import { AsamButton, AsamMessageBox, AsamSwitch } from '@asam-ui/ui';
import { h, ref } from 'vue';
const open = () => {
	AsamMessageBox({
		title: '消息',
		message: h('p', null, [
			h('span', null, '消息内容可以使用 '),
			h('i', { style: 'color: teal' }, 'VNode')
		])
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};
const open1 = () => {
	const checked = ref(false);
	AsamMessageBox({
		title: '消息',
		// Should pass a function if VNode contains dynamic props
		message: () =>
			h(AsamSwitch, {
				modelValue: checked.value,
				'onUpdate:modelValue': (val) => {
					checked.value = val;
				}
			})
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap: wrap;
}
.demo-gap {
	gap: var(--asam-space-sm);
}
</style>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

import { h } from 'vue';

const open = () => {
	AsamMessageBox.confirm(
		({ confirm, cancel, close }) => {
			return h('div', [
				h('p', { style: 'margin-bottom: 8px' }, '自定义按钮使用消息框操作处理器'),
				h(
					AsamButton,
					{
						type: 'default',
						onClick: () => {
							confirm();
						}
					},
					() => '完成（resolve）'
				),
				h(
					AsamButton,
					{
						type: 'danger',
						onClick: () => {
							cancel();
						}
					},
					() => '拒绝（reject）'
				),
				h(
					AsamButton,
					{
						onClick: () => {
							close();
						}
					},
					() => '关闭（close）'
				)
			]);
		},
		{
			title: '消息',
			showConfirmButton: false,
			showCancelButton: false,
			distinguishCancelAndClose: true
		}
	)
		.then((action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: `resolved: ${action}`
				})
			);
		})
		.catch((reason) => {
			trackAsamMessage(
				AsamMessage({
					type: 'error',
					message: `rejected: ${reason}`
				})
			);
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
import { h } from 'vue';
const open = () => {
	AsamMessageBox.confirm(
		({ confirm, cancel, close }) => {
			return h('div', [
				h('p', { style: 'margin-bottom: 8px' }, '自定义按钮使用消息框操作处理器'),
				h(
					AsamButton,
					{
						type: 'default',
						onClick: () => {
							confirm();
						}
					},
					() => '完成（resolve）'
				),
				h(
					AsamButton,
					{
						type: 'danger',
						onClick: () => {
							cancel();
						}
					},
					() => '拒绝（reject）'
				),
				h(
					AsamButton,
					{
						onClick: () => {
							close();
						}
					},
					() => '关闭（close）'
				)
			]);
		},
		{
			title: '消息',
			showConfirmButton: false,
			showCancelButton: false,
			distinguishCancelAndClose: true
		}
	)
		.then((action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: `resolved: ${action}`
				})
			);
		})
		.catch((reason) => {
			trackAsamMessage(
				AsamMessage({
					type: 'error',
					message: `rejected: ${reason}`
				})
			);
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

import { h } from 'vue';

const open = () => {
	AsamMessageBox({
		title: '消息',
		message: h('p', null, [
			h('span', null, '消息内容可以使用 '),
			h('i', { style: 'color: teal' }, 'VNode')
		]),
		showCancelButton: true,
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		beforeClose: (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				instance.confirmButtonText = '加载中……';
				setTimeout(() => {
					done();
					setTimeout(() => {
						instance.confirmButtonLoading = false;
					}, 300);
				}, 3000);
			} else {
				done();
			}
		}
	})
		.then((action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: `操作结果：${action}`
				})
			);
		})
		.catch((action) => {
			if (action !== 'cancel' && action !== 'close') throw action;
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
import { h } from 'vue';
const open = () => {
	AsamMessageBox({
		title: '消息',
		message: h('p', null, [
			h('span', null, '消息内容可以使用 '),
			h('i', { style: 'color: teal' }, 'VNode')
		]),
		showCancelButton: true,
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		beforeClose: (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				instance.confirmButtonText = '加载中……';
				setTimeout(() => {
					done();
					setTimeout(() => {
						instance.confirmButtonLoading = false;
					}, 300);
				}, 3000);
			} else {
				done();
			}
		}
	})
		.then((action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: `操作结果：${action}`
				})
			);
		})
		.catch((action) => {
			if (action !== 'cancel' && action !== 'close') throw action;
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessageBox } from '@asam-ui/ui';

const open = () => {
	AsamMessageBox.alert('<strong>这是一段 <i>HTML</i> 内容</strong>', 'HTML 内容', {
		dangerouslyUseHTMLString: true
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessageBox } from '@asam-ui/ui';
const open = () => {
	AsamMessageBox.alert('<strong>这是一段 <i>HTML</i> 内容</strong>', 'HTML 内容', {
		dangerouslyUseHTMLString: true
	}).catch((action) => {
		if (action !== 'cancel' && action !== 'close') throw action;
	});
};
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import {
	AsamButton,
	AsamMessage,
	AsamMessageBox,
	type AsamMessageBoxAction as Action,
	type AsamMessageHandler
} from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

const open = () => {
	AsamMessageBox.confirm('有未保存的修改，是否保存并继续？', '确认', {
		distinguishCancelAndClose: true,
		confirmButtonText: '保存',
		cancelButtonText: '放弃修改'
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '修改已保存，即将前往新页面。'
				})
			);
		})
		.catch((action: Action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: action === 'cancel' ? '已放弃修改，即将前往新页面。' : '留在当前页面'
				})
			);
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
const open = () => {
	AsamMessageBox.confirm('有未保存的修改，是否保存并继续？', '确认', {
		distinguishCancelAndClose: true,
		confirmButtonText: '保存',
		cancelButtonText: '放弃修改'
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '修改已保存，即将前往新页面。'
				})
			);
		})
		.catch((action) => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: action === 'cancel' ? '已放弃修改，即将前往新页面。' : '留在当前页面'
				})
			);
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		center: true
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		center: true
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

import { markRaw } from 'vue';

import { Delete } from '@asam-ui/icons-vue';

const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		icon: markRaw(Delete)
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamButton type="default" @click="open">点击打开消息框</AsamButton>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
import { markRaw } from 'vue';
import { Delete } from '@asam-ui/icons-vue';
const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		icon: markRaw(Delete)
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

vue

<template>
	<div class="flex flex-wrap demo-gap">
		<AsamButton type="default" class="!ml-0" @click="open"> 打开可拖拽消息框 </AsamButton>
		<AsamButton type="default" class="!ml-0" @click="open2">
			打开允许越界拖拽的消息框
		</AsamButton>
		<AsamButton type="default" class="!ml-0" @click="open3">
			打开自定义拖拽样式的消息框
		</AsamButton>
	</div>
</template>

<script lang="ts" setup>
import { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';

import { onBeforeUnmount } from 'vue';

const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};

const open2 = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		overflow: true
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};

const open3 = () => {
	AsamMessageBox.confirm('此消息框使用自定义拖拽样式，拖动它即可查看效果。', '自定义拖拽样式', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'info',
		draggable: true,
		customClass: 'custom-dragging-message-box'
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '操作完成'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消操作'
				})
			);
		});
};

const ownedAsamMessage = new Set<AsamMessageHandler>();
let mountedAsamMessage = true;
const trackAsamMessage = (handle: AsamMessageHandler) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

<style>
.custom-dragging-message-box.is-dragging {
	border: 2px dashed var(--el-color-primary);
	opacity: 0.65;
}
</style>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap: wrap;
}
.demo-gap {
	gap: var(--asam-space-sm);
}
</style>

vue

<template>
	<div class="flex flex-wrap demo-gap">
		<AsamButton type="default" class="!ml-0" @click="open"> 打开可拖拽消息框 </AsamButton>
		<AsamButton type="default" class="!ml-0" @click="open2">
			打开允许越界拖拽的消息框
		</AsamButton>
		<AsamButton type="default" class="!ml-0" @click="open3">
			打开自定义拖拽样式的消息框
		</AsamButton>
	</div>
</template>

<script setup>
import { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';
import { onBeforeUnmount } from 'vue';
const open = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};
const open2 = () => {
	AsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		overflow: true
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '删除成功'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消删除'
				})
			);
		});
};
const open3 = () => {
	AsamMessageBox.confirm('此消息框使用自定义拖拽样式，拖动它即可查看效果。', '自定义拖拽样式', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'info',
		draggable: true,
		customClass: 'custom-dragging-message-box'
	})
		.then(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'success',
					message: '操作完成'
				})
			);
		})
		.catch(() => {
			trackAsamMessage(
				AsamMessage({
					type: 'info',
					message: '已取消操作'
				})
			);
		});
};
const ownedAsamMessage = new Set();
let mountedAsamMessage = true;
const trackAsamMessage = (handle) => {
	if (mountedAsamMessage) ownedAsamMessage.add(handle);
	else handle.close();
	return handle;
};
onBeforeUnmount(() => {
	mountedAsamMessage = false;
	for (const handle of ownedAsamMessage) handle.close();
	ownedAsamMessage.clear();
});
</script>

<style>
.custom-dragging-message-box.is-dragging {
	border: 2px dashed var(--el-color-primary);
	opacity: 0.65;
}
</style>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
	display: flex;
}
.flex-wrap {
	flex-wrap: wrap;
}
.demo-gap {
	gap: var(--asam-space-sm);
}
</style>