modal-dialog-component

A vuejs, reactjs modal dialog component.

features

• vuejs component
• reactjs component
• custom component

install

npm i modal-dialog-component

link css

<link rel="stylesheet" href="./node_modules/modal-dialog-component/modal-dialog.min.css" />

vuejs component demo

npm i vue vue-class-component

import "modal-dialog-component/vue";

<modal-dialog :data="data">
</modal-dialog>

the online demo: https://plantain-00.github.io/modal-dialog-component/demo/vue/index.html

reactjs component demo

import { ModalDialog } from "modal-dialog-component/react";

<ModalDialog data={this.data}>
</ModalDialog>

the online demo: https://plantain-00.github.io/modal-dialog-component/demo/react/index.html

properties and events of the component

name | type | description --- | --- | --- data | ModalDialogData[] | the data of the modal-dialog

modal-dialog data structure

type ModalDialogData = {
    component: string | Function; // the item component, for vuejs, it is the component name, for reactjs, it is the class object
    data: any; // the data will be passed to the component as `data` props
};