# vue-lite-dialog

> 支持JSX和VNode的轻量级Vue弹窗组件

Latest version **1.2.0** (published 2020-11-18) · 0 weekly downloads

## Install

```sh
npm install vue-lite-dialog
pnpm add vue-lite-dialog
yarn add vue-lite-dialog
bun add vue-lite-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.2.0 |
| Published | 2020-11-18 |
| First published | 2020-07-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zhaochunzheng |
| Keywords | vue, dialog, lite-dialog |

## Links

- npm: https://www.npmjs.com/package/vue-lite-dialog
- npm.io page: https://npm.io/package/vue-lite-dialog

## 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.2.0 (latest) — 2020-11-18
- 1.1.8 — 2020-11-18
- 1.1.7 — 2020-11-18
- 1.1.6 — 2020-11-18
- 1.1.51 — 2020-09-02
- 1.1.5 — 2020-09-02
- 1.1.4 — 2020-09-02
- 1.1.3 — 2020-09-01
- 1.1.2 — 2020-08-03
- 1.1.1 — 2020-07-31
- 1.1.0 — 2020-07-31
- 1.0.3 — 2020-07-31
- 1.0.2 — 2020-07-31
- 1.0.1 — 2020-07-31
- 0.1.11 — 2020-07-30
- … 10 more at https://npm.io/package/vue-lite-dialog/versions

## README

# vue-dialog
## V1.0 currently only mobile is supported

## install
```
npm install vue-lite-dialog --save
```

## import & register
```javascript
import Dialog from 'vue-lite-dialog'
import 'vue-lite-dialog/dist/vue-dialog.css'

Vue.use(Dialog)
```

### Usage

```javascript
/* {
  *  title: string, // 标题
    content: string | VNode, // 弹窗内容
    btnCancelText: string, // 取消按钮文案
    btnOkText: string, // 确认按钮文案
    onOk: function, // 确认回调
    onCancel:function, // 取消回调
    extClass: String, // 扩展className
    type:['confirm','alert','dialog'] default 'dialog', // 弹窗类型
    placement: top left bottom right, // default bottom //  弹出位置
    noPadding: boolean, //default false
  * }
  */
 

// Alert
this.$Alert({
  title: 'title',
  content: <div>HelloWorld</div>,
  btnText: 'OK',
  onOk: async () => {
    await this.$ajax();
    return true
  },
})
```

```javascript
// Confirm
this.$Confirm({
  title: '确认',
  content: '确认退出？',
  btnOkText: '确认',
  btnCancelText: '取消',
  onOk: async () => {
    window.alert('OK');
    return true;
  },
});

// Dialog -- JSX
this.$Dialog({
  title: 'JSX',
  height: '60%',
  destroy: true,
  placement: 'right',
  content: (
    <HelloWorld
      props={{ msg: 'vue-lite-dialog' }}
      on-hello={(msg) => {
        this.$Alert({
          title: 'title',
          content: msg,
          btnText: 'OK',
          onOk: () => {
            return true;
          },
        });
      }}
    />
  ),
});

// Dialog -- VNode
this.$Dialog({
  title: 'VNode',
  height: '60%',
  destroy: true,
  placement: 'right',
  content: this.$createElement(HelloWorld, {
    props: {
      msg: 'vue-lite-dialog',
    },
    on: {
      hello: (msg) => {
        this.$Alert({
          title: 'title',
          content: msg,
          btnText: 'OK',
          onOk: () => {
            return true;
          },
        });
      },
    },
  }),
});

// You can get the dialog instance
let dialogInstance = this.$Confirm({
  title: '确认',
  content: '确认退出？',
  btnOkText: '确认',
  btnCancelText: '取消',
  onOk: async () => {
    window.alert('OK');
    return true;
  },
});
```

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