# vue-j-dialog

> Dialog (Modal) component for Vue2.x

Latest version **1.1.1** (published 2020-04-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-j-dialog
pnpm add vue-j-dialog
yarn add vue-j-dialog
bun add vue-j-dialog
```

## 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.1.1 |
| Published | 2020-04-24 |
| First published | 2017-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | AnderPang |
| Maintainers | anderpang |

## Links

- npm: https://www.npmjs.com/package/vue-j-dialog
- Repository: https://github.com/anderpang/vue-j-dialog
- Homepage: https://github.com/anderpang/vue-j-dialog#readme
- Issues: https://github.com/anderpang/vue-j-dialog/issues
- npm.io page: https://npm.io/package/vue-j-dialog

## Recent versions

- 1.1.1 (latest) — 2020-04-24
- 1.1.0 — 2020-04-24
- 1.0.3 — 2017-11-15
- 1.0.2 — 2017-11-13
- 1.0.1 — 2017-11-13
- 1.0.0 — 2017-11-13

## README

# vue-j-dialog

Dialog (Modal) component for Vue2.x

## npm

```bash

$ npm install vue-j-dialog

```

## Options


| Option                  | Purpose                                                                                                                                                                                                                                                                                                                         |
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| context        | {DOM} 挂靠元素，默认为body |
| type           | {String} 只有一个值"tip",为提示信息 |
| timeout        | {Number} 当type="tip"时，提示信息显示时间（单位：毫秒) |
| title          | {String} 标题 |
| content        | {String} 内容  |
| width          | {String} 宽，例如："100%","10em" |
| height         | {String} 高  |
| className      | {String} css类名  |
| showHeader      | {Boolean} 显示头部  |
| showFooter      | {Boolean} 显示脚部  |
| showCloseButton      | {Boolean} 显示关闭按钮  |
| showCancelButton      | {Boolean} 显示取消按钮  |
| showOkButton      | {Boolean} 显示确认按钮  |
| cancelText      | {String} 取消按钮文字  |
| okText      | {String} 确认按钮文字  |
| enableCoverClick      | {Boolean} 遮罩层是否能点击 |

# Events
| Option                  | Purpose                                                                                                                                                                                                                                                                                                                         |
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| open        | 打开dialog时的回调，回调参数为该组件对象 |
| close        | 离开dialog时的回调，回调参数为该组件对象 |
| ok        | 点击确定按钮时的回调，回调参数为该组件对象 |

## Example

#### main.js
```javascript
  import Vue from "vue";
  import Dialog from "vue-j-dialog";

  Vue.use(Dialog);
```
page.vue

```javascript
<template>
  <button @click="btnClick">打开弹窗（模板方式）</button>

  <button @click="btnClick2">打开弹窗（函数方式）</button>

  <show-dialog v-model="isShow" @close="onClose" @open="onOpen" @ok="onOk"> 
    <p>弹窗内容</p>
  </show-dialog>
</template>

<script>
import ShowDialog from "vue-j-dialog/index.vue"; //用于模板方式

export default {
    data () {
        return {
          isShow:false
        }
    },

    methods:{
       onOpen($this){
           console.log("打开回调",$this);
       },
       onClose($this){
           consle.log("关闭回调",$this);
       },
       onOk($this){
         console.log("确认回调",$this);
       },

       btnClick(){
           this.isShow=true;          
       },

       btnClick2(){
            this.$dialog({
                title:"说明",
                content:"这是函数打开"
            })
            .$on("close",this.onClose)
            .$on("open",this.onOpen)
            .$on("ok",this.onOk);
       }
    }
}
</script>
```

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