Dialog

A Modal component for Vue 3.x.

Please use the 2.x in Vue 2.x.

Live Demo

Usage

npm install vue-m-dialog

import MDialogPlugin from 'vue-m-dialog'
import 'vue-m-dialog/dist/style.css'

// will set global
// component `<m-dialog></m-dialog`
// method `this.$alert(...)`
// method `this.$confirm(...)`
Vue.use(MDialogPlugin)

// or reset
Vue.use(MDialogPlugin, {
  // <m-dialog></m-dialog>
  dialogName: 'm-dialog',
  // this.msg(...)
  alertName: 'msg',
  // this.confirm(...)
  confirmName: 'confirm',
  // Set default options for messageBox
  messageBoxDefaultOptions: {
    // ...
  },
})

<m-dialog
  v-model="show"
  title="Dialog Title"
  >
  <p>This is body...</p>
  <p>This is body...</p>
  <p>This is body...</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>

Dialog Attributes

| Attribute | Type | Description | Default | |-----------|------|-------------|---------| | modelValue/v-model | boolean | Visibility of dialog | — | | title | string | Title | — | | appendTo | string | Append dialog itself to other container; use body, #<ID>, null | 'body' | | class | string | Custom class names for dialog | — | | width | string | Width of dialog | '400px' | | padding | string | Padding of dialog | '25px' | | top | string | Margin top of dialog | '50px' | | zIndex | string/number | zIndex for dialog wrapper | 1000 | | isMiddle | boolean | Show on middle | false | | hideHeader | boolean | Hide header | false | | hasMask | boolean | It has mask | true | | hideCloseButton | boolean | It has close button | false | | canClickMaskClose | boolean | Whether can be closed by clicking the mask | false | | draggable | boolean | Enable dragging feature for dialog | false | | resetDrag | boolean | Whether to reset positon when displaying again | false | | isPointerEventsNone | boolean | Can click outside dialog when hasMask=false | false | | beforeClose | (cb: (ok: boolean) => void) => void | Callback before closes, and it will prevent Dialog from closing | — |

Dialog Slots

| Name | Description | |--------|-------------------------| | - | Content of the dialog | | title | Content of the dialog title | | footer | Content of the dialog footer |

Use the defined footer style:

<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>

Dialog Events

| Name | Description | Params | |------|--------------|---------| | close | Triggers when the Dialog closes | — | | open | Triggers when the dialog opens | — |

MessageBox

A messageBox mainly for alerting information, confirm operations.

MessageBox plugin base on Dialog component.

import { alert, confirm, createMessageBox, closeAll } from 'vue-m-dialog'

Interface of messageBox

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;

LICENSE

MIT LICENSE