# @yorolling/vmodal.js

> A modal component for vue

Latest version **1.0.1** (published 2018-07-26) · 0 weekly downloads

## Install

```sh
npm install @yorolling/vmodal.js
pnpm add @yorolling/vmodal.js
yarn add @yorolling/vmodal.js
bun add @yorolling/vmodal.js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-07-26 |
| First published | 2018-07-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 0 |
| Unpacked size | 58.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | YoRolling |
| Maintainers | yorolling |
| Keywords | vue, vuejs, modal, components, vue ui |

## Links

- npm: https://www.npmjs.com/package/@yorolling/vmodal.js
- Repository: https://github.com/YoRolling/vue-modal.js
- Homepage: https://github.com/YoRolling/vue-modal.js#readme
- Issues: https://github.com/YoRolling/vue-modal.js/issues
- npm.io page: https://npm.io/package/@yorolling/vmodal.js

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-07-26
- 1.0.0 — 2018-07-26

## README

# vue-modal.js

> A  modal component for `Vuejs`

## Install

    npm i -D @yorolling/vmodal.js

## Usage

```js
import VModal from '@yorolling/vmodal.js'
Vue.use(VModal)

// in component

export default {

    methods: {
        open() {
            const modal = this.$modal.open(
                {
                    template: `<div class='hello'>
                        <h1>aaaa</h1>
                        <div>
                            <button @click="close">close</button>
                            <button @click="dismiss">dismiss</button>
                        </div>
                        </div>`,
                    methods: {
                        close() {
                            this.modalRef.close({
                                code: 1,
                                args: 'close by button'
                            })
                        },
                        dismiss() {
                            this.modalRef.dismiss({
                                code: 1,
                                args: 'dismiss by button'
                            })
                        }
                    }
                }
            )
            modal.result
                .then(result => {
                    console.log('result: ', result)
                })
                .catch(reason => {
                    console.log('reason: ', reason)
                })
        }
    }
}
```

## Example

### Online Demo

[https://codesandbox.io/s/w7189485q8](https://codesandbox.io/s/w7189485q8)

### Local Demo

see example folders;

## dev

```bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test
```

## Other

This repro bases on `vue-cli` and `webpack` template.

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

---
_Source: https://npm.io/package/@yorolling/vmodal.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._