Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huibizhang/vue-global-modal
https://github.com/huibizhang/vue-global-modal
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/huibizhang/vue-global-modal
- Owner: huibizhang
- Created: 2023-11-02T20:41:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-02T21:38:04.000Z (about 1 year ago)
- Last Synced: 2024-10-14T08:31:29.383Z (3 months ago)
- Language: JavaScript
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-global-modal
The vue global modal based on global emitter of npm package [vue-happy-bus](https://www.npmjs.com/package/vue-happy-bus).
---
## Why This?
- **Easy to use**
Just a few steps, no complicated setup required.
- **Only logic & No style**
Focus on implementing the logic of components, no any default styles.
## Usage
#### First Step
Define your modal and put into **`vue-global-modal`**:
```html
OK
Cancel
import GlobalModal from "vue-plugin-modal";
```
#### Second Step
import and call **`$emit`** anywhere you need:
```html
import { $emit } from "vue-plugin-modal";
const emitFromApp = () => {
$emit("Alert", {
onConfirm: () => {
console.log("data saved!!");
},
});
};
...
emit!
...
```
## Properties
- #### name
_type: `String`_
_default: `"globalModal"`_
_description:_ Event name for emit.
- #### classOnShow
_type: `String`_
_default: `""`_
_description:_ class names apply when modal **showed**.
- #### classOnHide
_type: `String`_
_default: `""`_
_description:_ class names apply when modal **hided**.
- #### styleOnShow
_type: `Object`_
_default: `{}`_
_description:_ styles apply when modal **showed**.
- #### styleOnShow
_type: `Object`_
_default: `{}`_
_description:_ styles apply when modal **hided**.
- #### showLogs
_type: `Boolean`_
_default: `false`_
_description:_ Whether to display the console log when the event is triggered.