# vue-usemodal

> A modal plugin of Vue.js

Latest version **1.0.6** (published 2017-09-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-usemodal
pnpm add vue-usemodal
yarn add vue-usemodal
bun add vue-usemodal
```

## 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.6 |
| Published | 2017-09-02 |
| First published | 2017-09-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | ldq-first |
| Keywords | vue, modal, plugin |

## Links

- npm: https://www.npmjs.com/package/vue-usemodal
- Repository: https://github.com/LDQ-first/vue-usemodal
- Homepage: https://github.com/LDQ-first/vue-usemodal#readme
- Issues: https://github.com/LDQ-first/vue-usemodal/issues
- npm.io page: https://npm.io/package/vue-usemodal

## Dependencies (2)

- [node-sass](https://npm.io/package/node-sass.md) ^4.5.3
- [sass-loader](https://npm.io/package/sass-loader.md) ^6.0.6

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.6 (latest) — 2017-09-02
- 1.0.5 — 2017-09-01
- 1.0.4 — 2017-09-01
- 1.0.3 — 2017-09-01
- 1.0.2 — 2017-09-01
- 1.0.1 — 2017-09-01

## README

# vue-usemodal

> A modal plugin of Vue.js 

[Demo](http://ldqblog.me/vue-modal-plugin/dist/#/)

[more detail of use](https://github.com/LDQ-first/vue-modal-plugin/tree/master/src/views/show.vue)


## Use

``` javascript
/*-- npm --*/
npm install --save vue-usemodal
```

``` javascript
/*-- main.js --*/
import Vue from 'vue'
import VueModal from 'vue-usemodal'
Vue.use(VueModal)
```


1. First

```
<!--html-->
<modal :mdShow="modal" @close="closeModal">
    <h3 slot="title">Modal</h3>
</modal>
```

2. Second
```
<!--html-->
<modal :mdShow="modal" @close="closeModal">
    <h3 slot="title">Modal</h3>
    <p slot="message">
        {{modalMessage}}
    </p>
</modal>
```

3. Third
```
<!--html-->
<modal :mdShow="modal" @close="closeModal">
    <h3 slot="title">Modal</h3>
    <p slot="message">
        {{modalMessage}}
    </p>
    <div slot="btnGroup">
        <button class="md-close" @click="closeModal">closeModal</button>
    </div>
</modal>
```

4. Fourth
```
<!--html-->
<modal :mdShow="modalFour" @close="closeModal">
    <h3 slot="title" >Modal</h3>
    <p slot="message">
        {{modalMessage}}
    </p>
    <div slot="btnGroup" >
        <button class="md-close" @click="dosomething();closeModal">sure</button>
        <button class="md-close" @click="closeModal">cancel</button>
    </div>
</modal>

```


5. Fifth
```
<modal :mdShow="modalFive" @close="closeModal">
    <h3 slot="title">Modal</h3>
    <p slot="message">
        {{modalMessage}}
        <ul>
            <li v-for="(item, index) of message" key="index">
                <div>
                    <span>{{item.name}}</span>
                    <input type="text" v-model="item.value">
                </div>
            </li>
        </ul>
    </p>
    <div slot="btnGroup">
        <button class="md-close" @click="closeModal">sure</button>
        <button class="md-close" @click="dosomething();closeModal">cancel</button>
    </div>
</modal>
```

## Param

```
props: ['mdShow']
```


## Three solt

```
<slot name='title'></slot>

<slot name="message"></slot>

<slot name="btnGroup"></slot>

```


> You can also explore more use by yourself

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