Allowing a user to interact with a modal dialog is an oft-needed and appreciated feature.
m-dialog is a Vue 3 modal component that empowers users to easily write their own interactive modal windows like alert and confirm dialogs.
Features:
- Draggable
- Multiple modals at a time
- With or without background overlay.
- Can be appended to any container.
How to use it:
1. Import and register the m-dialog component.
import MDialogPlugin from 'vue-m-dialog'
import 'vue-m-dialog/dist/style.css'
Vue.use(MDialogPlugin,{
// options here
})
2. Add the component to the template.
<m-dialog
v-model="show"
title="Dialog Title"
>
<p>This is a Modal</p>
<template v-slot:footer>
<button class="m-dialog--cancel-btn" @click="show = false">Cancel</button>
<button class="m-dialog--confirm-btn" @click="show = false">Okey !</button>
</template>
</m-dialog>
3. All available component props.
modelValue: Boolean,
appendTo: {
type: [String, Object, null, undefined] as PropType<string | RendererElement | null | undefined>,
default: 'body'
},
title: String,
class: String,
width: String,
zIndex: [String, Number],
padding: String,
top: String,
isMiddle: Boolean,
hideHeader: Boolean,
hasMask: {
type: Boolean,
default: true
},
hideCloseButton: Boolean,
canClickMaskClose: Boolean,
draggable: Boolean,
resetDrag: Boolean,
isPointerEventsNone: Boolean,
beforeClose: Function as PropType<(cb: (ok: boolean) => void) => void>
4. Create alert/confirm dialogs.
import { alert, confirm, createMessageBox, closeAll } from 'vue-m-dialog'
import { AppContext } from 'vue';
export interface MessageBoxOptions {
title?: string;
message?: string | JSX.Element | (() => JSX.Element);
class?: string;
width?: string;
padding?: string;
top?: string;
zIndex?: string | number;
isMiddle?: boolean;
hideHeader?: boolean;
hasMask?: boolean;
draggable?: boolean;
isPointerEventsNone?: boolean;
showCancelButton?: boolean;
showConfirmButton?: boolean;
disableCancelButton?: boolean;
disableConfirmButton?: boolean;
cancelButtonText?: string;
confirmButtonText?: string;
beforeClose?: (cb: (ok: boolean) => void) => void;
onOpen?: () => void;
onRemove?: () => void;
[key: string]: any;
}
export declare function createMessageBox(options: MessageBoxOptions, context?: AppContext): Promise<{
action: string;
ok: boolean;
}>;
export declare const alert: (message: string, title?: string | undefined, options?: MessageBoxOptions | undefined, context?: AppContext | undefined) => Promise<{
action: string;
ok: boolean;
}>;
export declare const confirm: (message: string, title?: string | undefined, options?: MessageBoxOptions | undefined, context?: AppContext | undefined) => Promise<{
action: string;
ok: boolean;
}>;
export declare const closeAll: () => void;
export declare const setDefaultOptions: (opts?: MessageBoxOptions | undefined) => void;
Preview:
Download Details:
Author: mengdu
Live Demo: https://mengdu.github.io/m-dialog/
Download Link: https://github.com/mengdu/m-dialog/archive/refs/heads/master.zip
Official Website: https://github.com/mengdu/m-dialog
Install & Download: