mengdu / m-dialog

A dialog component for vue.

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

m-dialog's Issues

Make this component works with Nuxt

Currently, m-message is working with Nuxt, but m-dialog isn't. Could you please make it work with Nuxt?
Thank you very much.

$alert, $confirm 支持延迟执行配置

options.delay 可以延迟指定毫秒后执行

下一次更新计划

• css自动加载
• 添加宽度自动属性
• 背景遮罩出场优化
• 添加主题

$confirm catch 会增加try/catch处理代码，可以添加参数配置不“cancel”时不catch

你好，可以在单个组件局部引用吗，而不是注册全局组件

您的示例：

import MDialog from 'vue-m-dialog'
// ro
import { Dialog, Alert, Confirm } from 'vue-m-dialog'

Vue.use(MDialog) // 将挂载 m-dialog组件和 Vue.prototype.$alert 和 Vue.prototype.$confirm

我想：
在.vue文件<script>中：

import { Dialog } from 'vue-m-dialog'

components: { MDialog: Dialog }

<template>中：

<m-dialog 
    :show.sync="dialogShow"
    title="提示"
    width="300px"
  >
    <span>这里是正文内容...</span>
    <div slot="footer">
      <div style="float: right">
        <m-button plain @click="show = false">取消</m-button>
        <m-button type="info">确定</m-button>
      </div>
    </div>
  </m-dialog>

但是我不知道m-button是从哪里导入？
而且我这样使用还会有一个错误：

[Vue warn]: Unknown custom element: <m-dialog> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

感谢作者创造轮子并开源

非常感谢作者的开源精神
但是有一个小需求，希望作者可以考虑一下
打开Modal之后，禁止页面滚动，这也算是一个刚需吧