User feedback mechanisms including notifications, dialogs, loading states, confirmation elements, and status indicators. These components provide essential user interface feedback for various interaction states and system responses.
Global message and notification services for user feedback with various severity levels.
/**
* Message service for temporary notifications
*/
interface MessageMethod {
/**
* Show info message
* @param config - Message content or configuration
* @param appContext - Vue app context (optional)
* @returns Message instance with close method
*/
info(config: string | MessageConfig, appContext?: AppContext): MessageReturn;
/**
* Show success message
* @param config - Message content or configuration
* @param appContext - Vue app context (optional)
* @returns Message instance with close method
*/
success(config: string | MessageConfig, appContext?: AppContext): MessageReturn;
/**
* Show warning message
* @param config - Message content or configuration
* @param appContext - Vue app context (optional)
* @returns Message instance with close method
*/
warning(config: string | MessageConfig, appContext?: AppContext): MessageReturn;
/**
* Show error message
* @param config - Message content or configuration
* @param appContext - Vue app context (optional)
* @returns Message instance with close method
*/
error(config: string | MessageConfig, appContext?: AppContext): MessageReturn;
/**
* Show loading message
* @param config - Message content or configuration
* @param appContext - Vue app context (optional)
* @returns Message instance with close method
*/
loading(config: string | MessageConfig, appContext?: AppContext): MessageReturn;
/**
* Show normal message
* @param config - Message content or configuration
* @param appContext - Vue app context (optional)
* @returns Message instance with close method
*/
normal(config: string | MessageConfig, appContext?: AppContext): MessageReturn;
/**
* Clear all messages
* @param position - Position to clear ('top' | 'bottom'), or clear all if not specified
*/
clear(position?: 'top' | 'bottom'): void;
}
/**
* Notification service for persistent notifications
*/
interface NotificationMethod {
/**
* Show info notification
* @param config - Notification configuration
* @returns Notification instance with close method
*/
info(config: NotificationConfig): NotificationReturn;
/**
* Show success notification
* @param config - Notification configuration
* @returns Notification instance with close method
*/
success(config: NotificationConfig): NotificationReturn;
/**
* Show warning notification
* @param config - Notification configuration
* @returns Notification instance with close method
*/
warning(config: NotificationConfig): NotificationReturn;
/**
* Show error notification
* @param config - Notification configuration
* @returns Notification instance with close method
*/
error(config: NotificationConfig): NotificationReturn;
/**
* Clear all notifications
* @param position - Position to clear, or clear all if not specified
*/
clear(position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'): void;
}
// Message/Notification Types
interface MessageConfig {
content: string;
id?: string;
icon?: any;
position?: 'top' | 'bottom';
showIcon?: boolean;
closable?: boolean;
duration?: number;
onClose?: (id: number | string) => void;
resetOnHover?: boolean;
}
interface NotificationConfig {
id?: string | number;
title?: string;
content?: string;
icon?: string;
position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
showIcon?: boolean;
closable?: boolean;
duration?: number;
footer?: string;
transitionName?: string;
onClose?: (id: string | number) => void;
}
interface MessageReturn {
close: () => void;
}
interface NotificationReturn {
close: () => void;
}
// Global Message and Notification objects
declare const Message: MessageMethod;
declare const Notification: NotificationMethod;Modal dialog service for user confirmations and custom dialogs.
/**
* Modal service for dialogs and confirmations
*/
interface ModalMethod {
/**
* Show info modal
* @param config - Modal configuration
* @returns Modal instance with close method
*/
info(config: ModalConfig): ModalReturn;
/**
* Show success modal
* @param config - Modal configuration
* @returns Modal instance with close method
*/
success(config: ModalConfig): ModalReturn;
/**
* Show warning modal
* @param config - Modal configuration
* @returns Modal instance with close method
*/
warning(config: ModalConfig): ModalReturn;
/**
* Show error modal
* @param config - Modal configuration
* @returns Modal instance with close method
*/
error(config: ModalConfig): ModalReturn;
/**
* Show confirmation modal
* @param config - Modal configuration
* @returns Modal instance with close method
*/
confirm(config: ModalConfig): ModalReturn;
/**
* Open modal with custom content
* @param config - Modal configuration
* @returns Modal instance with close method
*/
open(config: ModalConfig): ModalReturn;
}
/**
* Modal component for custom dialogs
*/
export function Modal(props: ModalProps): JSX.Element;
// Modal Types
interface ModalConfig {
title?: string;
content?: string;
icon?: string;
hideCancel?: boolean;
okText?: string;
cancelText?: string;
okButtonProps?: Record<string, any>;
cancelButtonProps?: Record<string, any>;
closable?: boolean;
maskClosable?: boolean;
draggable?: boolean;
fullscreen?: boolean;
mask?: boolean;
simple?: boolean;
width?: string | number;
top?: string | number;
alignCenter?: boolean;
escToClose?: boolean;
renderToBody?: boolean;
popupContainer?: string | HTMLElement;
onOk?: () => void | Promise<void>;
onCancel?: () => void;
onOpen?: () => void;
onBeforeOk?: (done: (closed?: boolean) => void) => void | boolean | Promise<void | boolean>;
onBeforeCancel?: (done: (closed?: boolean) => void) => void | boolean | Promise<void | boolean>;
}
interface ModalProps extends ModalConfig {
visible?: boolean;
defaultVisible?: boolean;
titleAlign?: 'start' | 'center';
onVisibleChange?: (visible: boolean) => void;
}
interface ModalReturn {
close: () => void;
}
// Global Modal object
declare const Modal: ModalMethod;Components for indicating loading and processing states.
/**
* Loading spinner component
*/
export function Spin(props: SpinProps): JSX.Element;
/**
* Skeleton loading placeholder component
*/
export function Skeleton(props: SkeletonProps): JSX.Element;
/**
* Skeleton line component
*/
export function SkeletonLine(props: SkeletonLineProps): JSX.Element;
/**
* Skeleton shape component
*/
export function SkeletonShape(props: SkeletonShapeProps): JSX.Element;
/**
* Progress indicator component
*/
export function Progress(props: ProgressProps): JSX.Element;
// Loading Types
interface SpinProps {
loading?: boolean;
size?: Size | number;
icon?: string;
element?: string;
tip?: string;
delay?: number;
dot?: boolean;
}
interface SkeletonProps {
animation?: boolean;
loading?: boolean;
image?: boolean | { shape?: 'circle' | 'square'; size?: Size | number; position?: 'left' | 'right' };
text?: boolean | { rows?: number; width?: (string | number)[] };
}
interface SkeletonLineProps {
rows?: number;
widths?: (string | number)[];
}
interface SkeletonShapeProps {
shape?: 'circle' | 'square';
size?: Size | number;
}Alert messages and status indicators for various states and conditions.
/**
* Alert message component
*/
export function Alert(props: AlertProps): JSX.Element;
/**
* Result page component for status display
*/
export function Result(props: ResultProps): JSX.Element;
// Alert/Status Types
interface AlertProps {
type?: 'info' | 'success' | 'warning' | 'error';
title?: string;
content?: string;
showIcon?: boolean;
closable?: boolean;
center?: boolean;
banner?: boolean;
onClose?: (event: Event) => void;
}
interface ResultProps {
status?: 'success' | 'error' | 'info' | 'warning' | '403' | '404' | '500';
title?: string;
subtitle?: string;
extra?: string;
}Dialog and overlay components for focused interactions.
/**
* Drawer sliding panel component
*/
export function Drawer(props: DrawerProps): JSX.Element;
/**
* Popconfirm confirmation popover component
*/
export function Popconfirm(props: PopconfirmProps): JSX.Element;
/**
* Popover content overlay component
*/
export function Popover(props: PopoverProps): JSX.Element;
/**
* Tooltip hover information component
*/
export function Tooltip(props: TooltipProps): JSX.Element;
// Dialog/Overlay Types
interface DrawerProps {
visible?: boolean;
defaultVisible?: boolean;
placement?: 'top' | 'right' | 'bottom' | 'left';
title?: string;
mask?: boolean;
maskClosable?: boolean;
closable?: boolean;
okText?: string;
cancelText?: string;
okButtonProps?: Record<string, any>;
cancelButtonProps?: Record<string, any>;
unmountOnClose?: boolean;
width?: string | number;
height?: string | number;
popupContainer?: string | HTMLElement;
drawerStyle?: Record<string, any>;
headerStyle?: Record<string, any>;
bodyStyle?: Record<string, any>;
footer?: boolean;
hideCancel?: boolean;
autoFocus?: boolean;
focusLock?: boolean;
escToClose?: boolean;
onOk?: () => void;
onCancel?: () => void;
onVisibleChange?: (visible: boolean) => void;
onBeforeOk?: (done: (closed?: boolean) => void) => void | boolean | Promise<void | boolean>;
onBeforeCancel?: (done: (closed?: boolean) => void) => void | boolean | Promise<void | boolean>;
}
interface PopconfirmProps {
title?: string;
content?: string;
position?: TriggerPosition;
popupVisible?: boolean;
defaultPopupVisible?: boolean;
type?: 'info' | 'success' | 'warning' | 'error';
okText?: string;
cancelText?: string;
okButtonProps?: Record<string, any>;
cancelButtonProps?: Record<string, any>;
icon?: string;
disabled?: boolean;
focusLock?: boolean;
onOk?: (event: Event) => void | Promise<void>;
onCancel?: (event: Event) => void;
onVisibleChange?: (visible: boolean) => void;
onBeforeOk?: (done: (closed?: boolean) => void) => void | boolean | Promise<void | boolean>;
onBeforeCancel?: (done: (closed?: boolean) => void) => void | boolean | Promise<void | boolean>;
}
interface PopoverProps {
title?: string;
content?: string;
trigger?: TriggerEvent | TriggerEvent[];
position?: TriggerPosition;
popupVisible?: boolean;
defaultPopupVisible?: boolean;
disabled?: boolean;
popupContainer?: string | HTMLElement;
contentClass?: string;
contentStyle?: Record<string, any>;
arrowClass?: string;
arrowStyle?: Record<string, any>;
popupStyle?: Record<string, any>;
onVisibleChange?: (visible: boolean) => void;
}
interface TooltipProps {
content?: string;
position?: TriggerPosition;
mini?: boolean;
backgroundColor?: string;
color?: string;
popupVisible?: boolean;
defaultPopupVisible?: boolean;
disabled?: boolean;
trigger?: TriggerEvent | TriggerEvent[];
popupContainer?: string | HTMLElement;
contentClass?: string;
contentStyle?: Record<string, any>;
arrowClass?: string;
arrowStyle?: Record<string, any>;
popupStyle?: Record<string, any>;
onVisibleChange?: (visible: boolean) => void;
}Global configuration interfaces for feedback services.
/**
* Drawer service configuration and methods
*/
interface DrawerMethod {
open(config: DrawerConfig): DrawerReturn;
info(config: DrawerConfig): DrawerReturn;
success(config: DrawerConfig): DrawerReturn;
warning(config: DrawerConfig): DrawerReturn;
error(config: DrawerConfig): DrawerReturn;
}
interface DrawerConfig extends DrawerProps {
content?: string;
}
interface DrawerReturn {
close: () => void;
}
// Global service objects
declare const Drawer: DrawerMethod;Usage Examples:
<template>
<!-- Alert messages -->
<a-alert
type="success"
title="Success"
content="Operation completed successfully!"
show-icon
closable
@close="handleAlertClose"
/>
<!-- Loading states -->
<a-spin :loading="isLoading" tip="Loading...">
<div class="content">
<p>Content to be loaded</p>
</div>
</a-spin>
<!-- Skeleton placeholder -->
<a-skeleton
:loading="isLoading"
:animation="true"
:image="{ shape: 'circle', size: 'large' }"
:text="{ rows: 3, width: ['100%', '80%', '60%'] }"
>
<div class="loaded-content">
<!-- Actual content when loaded -->
</div>
</a-skeleton>
<!-- Confirmation popover -->
<a-popconfirm
title="Are you sure?"
content="This action cannot be undone."
@ok="handleDelete"
@cancel="handleCancel"
>
<a-button type="primary" status="danger">Delete</a-button>
</a-popconfirm>
<!-- Drawer panel -->
<a-drawer
v-model:visible="drawerVisible"
title="Settings"
placement="right"
:width="320"
@ok="handleDrawerOk"
@cancel="handleDrawerCancel"
>
<div>Drawer content</div>
</a-drawer>
<!-- Tooltip -->
<a-tooltip content="This is a helpful tooltip">
<a-button>Hover me</a-button>
</a-tooltip>
</template>
<script>
import { Message, Modal, Notification } from '@arco-design/web-vue';
export default {
methods: {
// Service-based feedback
showMessage() {
Message.success('Operation successful!');
},
showNotification() {
Notification.info({
title: 'New Message',
content: 'You have received a new message.',
duration: 5000
});
},
showConfirmModal() {
Modal.confirm({
title: 'Confirm Delete',
content: 'Are you sure you want to delete this item?',
onOk: () => {
// Handle deletion
Message.success('Item deleted');
}
});
},
showLoadingMessage() {
const loading = Message.loading('Processing...');
// Simulate async operation
setTimeout(() => {
loading.close();
Message.success('Process completed!');
}, 3000);
}
}
};
</script>// Instance types for template refs
export type AlertInstance = InstanceType<typeof Alert>;
export type SpinInstance = InstanceType<typeof Spin>;
export type SkeletonInstance = InstanceType<typeof Skeleton>;
export type ProgressInstance = InstanceType<typeof Progress>;
export type ResultInstance = InstanceType<typeof Result>;
export type DrawerInstance = InstanceType<typeof Drawer>;
export type PopconfirmInstance = InstanceType<typeof Popconfirm>;
export type PopoverInstance = InstanceType<typeof Popover>;
export type TooltipInstance = InstanceType<typeof Tooltip>;