Skip to content

mengdu/m-dialog

Repository files navigation

Dialog

NPM

A Modal component for Vue 3.x.

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

Live Demo

Preview

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