User feedback and overlay components including dialogs, notifications, tooltips, and loading states for enhanced user experience.
Modal dialog for important user interactions.
declare const ElDialog: Component;
interface DialogProps {
/** Whether dialog is visible */
modelValue?: boolean;
/** Dialog title */
title?: string;
/** Dialog width */
width?: string | number;
/** Whether fullscreen */
fullscreen?: boolean;
/** Dialog top margin */
top?: string;
/** Whether show close button */
showClose?: boolean;
/** Whether modal */
modal?: boolean;
/** Modal class */
modalClass?: string;
/** Whether append to body */
appendToBody?: boolean;
/** Whether lock scroll */
lockScroll?: boolean;
/** Custom class */
customClass?: string;
/** Whether close on click modal */
closeOnClickModal?: boolean;
/** Whether close on press escape */
closeOnPressEscape?: boolean;
/** Whether destroy on close */
destroyOnClose?: boolean;
/** Center content */
center?: boolean;
/** Align center */
alignCenter?: boolean;
/** Close delay */
closeDelay?: number;
/** Open delay */
openDelay?: number;
/** Before close hook */
beforeClose?: (done: Function) => void;
/** Whether draggable */
draggable?: boolean;
/** Overflow */
overflow?: boolean;
}
interface DialogEmits {
/** Update model value */
'update:modelValue': (value: boolean) => void;
/** Open event */
open: () => void;
/** Opened event */
opened: () => void;
/** Close event */
close: () => void;
/** Closed event */
closed: () => void;
/** Open auto focus event */
'open-auto-focus': () => void;
/** Close auto focus event */
'close-auto-focus': () => void;
}Side panel overlay for secondary content.
declare const ElDrawer: Component;
interface DrawerProps {
/** Whether drawer is visible */
modelValue?: boolean;
/** Drawer title */
title?: string;
/** Drawer size */
size?: string | number;
/** Drawer direction */
direction?: 'rtl' | 'ltr' | 'ttb' | 'btt';
/** Whether append to body */
appendToBody?: boolean;
/** Whether destroy on close */
destroyOnClose?: boolean;
/** Whether modal */
modal?: boolean;
/** Whether lock scroll */
lockScroll?: boolean;
/** Whether close on press escape */
closeOnPressEscape?: boolean;
/** Whether close on click modal */
closeOnClickModal?: boolean;
/** Whether show close */
showClose?: boolean;
/** Before close hook */
beforeClose?: (done: Function) => void;
/** Custom class */
customClass?: string;
/** Whether with header */
withHeader?: boolean;
/** Open delay */
openDelay?: number;
/** Close delay */
closeDelay?: number;
}Contextual tooltip for additional information.
declare const ElTooltip: Component;
interface TooltipProps {
/** Tooltip content */
content?: string;
/** Raw content (no escaping) */
rawContent?: boolean;
/** Tooltip placement */
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
/** Whether tooltip is disabled */
disabled?: boolean;
/** Tooltip offset */
offset?: number;
/** Tooltip trigger */
trigger?: 'hover' | 'click' | 'focus' | 'contextmenu';
/** Whether visible */
visible?: boolean;
/** Show after */
showAfter?: number;
/** Hide after */
hideAfter?: number;
/** Auto close */
autoClose?: number;
/** Tooltip class */
tooltipClass?: string;
/** Popper class */
popperClass?: string;
/** Enterable tooltip */
enterable?: boolean;
/** Teleported */
teleported?: boolean;
/** Virtual triggering */
virtualTriggering?: boolean;
/** Virtual ref */
virtualRef?: any;
/** Tooltip effect */
effect?: 'dark' | 'light';
/** Show arrow */
showArrow?: boolean;
/** Persistent */
persistent?: boolean;
}
declare const ElTooltipV2: Component;Popover overlay for rich content.
declare const ElPopover: Component;
interface PopoverProps {
/** Popover trigger */
trigger?: 'click' | 'focus' | 'hover' | 'contextmenu' | 'manual';
/** Popover title */
title?: string;
/** Popover content */
content?: string;
/** Popover width */
width?: string | number;
/** Popover placement */
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
/** Whether popover is disabled */
disabled?: boolean;
/** Whether visible */
visible?: boolean;
/** Popover offset */
offset?: number;
/** Transition */
transition?: string;
/** Show arrow */
showArrow?: boolean;
/** Popper options */
popperOptions?: any;
/** Popper class */
popperClass?: string;
/** Show after */
showAfter?: number;
/** Hide after */
hideAfter?: number;
/** Auto close */
autoClose?: number;
/** Tab index */
tabindex?: number;
/** Teleported */
teleported?: boolean;
/** Persistent */
persistent?: boolean;
}
declare const ElPopconfirm: Component;
interface PopconfirmProps {
/** Confirmation title */
title?: string;
/** Confirm button text */
confirmButtonText?: string;
/** Cancel button text */
cancelButtonText?: string;
/** Confirm button type */
confirmButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
/** Cancel button type */
cancelButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
/** Icon */
icon?: string | Component;
/** Icon color */
iconColor?: string;
/** Whether hide icon */
hideIcon?: boolean;
/** Whether hide after */
hideAfter?: number;
/** Whether teleported */
teleported?: boolean;
/** Persistent */
persistent?: boolean;
/** Popover width */
width?: string | number;
}Alert messages for important information.
declare const ElAlert: Component;
interface AlertProps {
/** Alert title */
title?: string;
/** Alert type */
type?: 'success' | 'warning' | 'info' | 'error';
/** Alert description */
description?: string;
/** Whether alert is closable */
closable?: boolean;
/** Whether center content */
center?: boolean;
/** Custom close text */
closeText?: string;
/** Whether show icon */
showIcon?: boolean;
/** Alert effect */
effect?: 'light' | 'dark';
}
interface AlertEmits {
/** Close event */
close: (event: MouseEvent) => void;
}Global message notifications.
interface MessageService {
/** Show success message */
success(message: string | MessageOptions): MessageHandle;
/** Show warning message */
warning(message: string | MessageOptions): MessageHandle;
/** Show info message */
info(message: string | MessageOptions): MessageHandle;
/** Show error message */
error(message: string | MessageOptions): MessageHandle;
/** Show message */
(message: string | MessageOptions): MessageHandle;
/** Close all messages */
closeAll(): void;
}
interface MessageOptions {
/** Message text */
message?: string;
/** Message type */
type?: 'success' | 'warning' | 'info' | 'error';
/** Custom icon */
icon?: string | Component;
/** Whether HTML string */
dangerouslyUseHTMLString?: boolean;
/** Custom class */
customClass?: string;
/** Duration before auto close */
duration?: number;
/** Whether show close button */
showClose?: boolean;
/** Whether center content */
center?: boolean;
/** Callback on close */
onClose?: () => void;
/** Offset from top */
offset?: number;
/** Whether append to body */
appendTo?: string | HTMLElement;
/** Whether grouping */
grouping?: boolean;
/** Repeat count */
repeatNum?: number;
}
interface MessageHandle {
/** Close message */
close(): void;
}
declare const ElMessage: MessageService;Desktop-style notifications.
interface NotificationService {
/** Show success notification */
success(options: NotificationOptions): NotificationHandle;
/** Show warning notification */
warning(options: NotificationOptions): NotificationHandle;
/** Show info notification */
info(options: NotificationOptions): NotificationHandle;
/** Show error notification */
error(options: NotificationOptions): NotificationHandle;
/** Show notification */
(options: NotificationOptions): NotificationHandle;
/** Close all notifications */
closeAll(): void;
}
interface NotificationOptions {
/** Notification title */
title?: string;
/** Notification message */
message?: string;
/** Notification type */
type?: 'success' | 'warning' | 'info' | 'error';
/** Custom icon */
icon?: string | Component;
/** Whether HTML string */
dangerouslyUseHTMLString?: boolean;
/** Custom class */
customClass?: string;
/** Duration before auto close */
duration?: number;
/** Notification position */
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
/** Whether show close button */
showClose?: boolean;
/** Callback on close */
onClose?: () => void;
/** Callback on click */
onClick?: () => void;
/** Offset */
offset?: number;
/** Whether append to body */
appendTo?: string | HTMLElement;
/** Z-index */
zIndex?: number;
}
interface NotificationHandle {
/** Close notification */
close(): void;
}
declare const ElNotification: NotificationService;Modal dialogs for user confirmation.
interface MessageBoxService {
/** Show alert dialog */
alert(message: string, title?: string, options?: MessageBoxOptions): Promise<MessageBoxResult>;
/** Show confirm dialog */
confirm(message: string, title?: string, options?: MessageBoxOptions): Promise<MessageBoxResult>;
/** Show prompt dialog */
prompt(message: string, title?: string, options?: MessageBoxOptions): Promise<MessageBoxResult>;
/** Show message box */
(options: MessageBoxOptions): Promise<MessageBoxResult>;
}
interface MessageBoxOptions {
/** Dialog title */
title?: string;
/** Dialog message */
message?: string;
/** Message type */
type?: 'success' | 'warning' | 'info' | 'error';
/** Custom icon */
icon?: string | Component;
/** Whether HTML string */
dangerouslyUseHTMLString?: boolean;
/** Custom class */
customClass?: string;
/** Callback function */
callback?: (action: string, instance: any) => void;
/** Whether show close button */
showClose?: boolean;
/** Before close hook */
beforeClose?: (action: string, instance: any, done: Function) => void;
/** Whether distinguish cancel and close */
distinguishCancelAndClose?: boolean;
/** Whether lock scroll */
lockScroll?: boolean;
/** Whether show cancel button */
showCancelButton?: boolean;
/** Whether show confirm button */
showConfirmButton?: boolean;
/** Cancel button text */
cancelButtonText?: string;
/** Confirm button text */
confirmButtonText?: string;
/** Cancel button class */
cancelButtonClass?: string;
/** Confirm button class */
confirmButtonClass?: string;
/** Whether close on click modal */
closeOnClickModal?: boolean;
/** Whether close on press escape */
closeOnPressEscape?: boolean;
/** Whether close on hash change */
closeOnHashChange?: boolean;
/** Whether show input */
showInput?: boolean;
/** Input placeholder */
inputPlaceholder?: string;
/** Input type */
inputType?: string;
/** Input value */
inputValue?: string;
/** Input pattern */
inputPattern?: RegExp;
/** Input validator */
inputValidator?: (value: string) => boolean | string;
/** Input error message */
inputErrorMessage?: string;
/** Whether center content */
center?: boolean;
/** Whether draggable */
draggable?: boolean;
/** Whether round button */
roundButton?: boolean;
/** Container */
container?: string | HTMLElement;
}
interface MessageBoxResult {
/** Action type */
action: 'confirm' | 'cancel' | 'close';
/** Input value for prompt */
value?: string;
}
declare const ElMessageBox: MessageBoxService;Loading state overlay.
interface LoadingService {
/** Show loading overlay */
(options?: LoadingOptions): LoadingHandle;
}
interface LoadingOptions {
/** Loading target element */
target?: string | HTMLElement;
/** Whether fullscreen */
fullscreen?: boolean;
/** Loading text */
text?: string;
/** Loading spinner */
spinner?: string | Component;
/** Background color */
background?: string;
/** Custom class */
customClass?: string;
/** Whether lock scroll */
lock?: boolean;
}
interface LoadingHandle {
/** Close loading */
close(): void;
}
declare const ElLoading: LoadingService;
// Loading directive
interface LoadingDirective {
/** Whether loading */
loading?: boolean;
/** Loading text */
'element-loading-text'?: string;
/** Loading spinner */
'element-loading-spinner'?: string;
/** Loading background */
'element-loading-background'?: string;
/** Loading custom class */
'element-loading-custom-class'?: string;
}type ComponentSize = '' | 'large' | 'default' | 'small';
interface Component {
name?: string;
props?: Record<string, any>;
emits?: string[] | Record<string, any>;
setup?: Function;
}