# wil-dialog

> 通用对话框组件

Latest version **1.0.0** (published 2023-09-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install wil-dialog
pnpm add wil-dialog
yarn add wil-dialog
bun add wil-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.0.0 |
| Published | 2023-09-04 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ncushujian |
| Maintainers | ncushujian |

## Links

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

## Recent versions

- 1.0.0 (latest) — 2023-09-04

## README

# wil-dialog
> 通用对话框组件。

**[Demo示例]()**       
**[前往Gitee](https://gitee.com/ncushujian/wil-web-modules/tree/master/dialog)**

## 安装
### 方式一：通过import方式引入
```bash
npm install wil-dialog
```
```javascript
import dialog from 'wil-dialog';

/** 显示 Dialog */
dialog.show({
  type: 1,
  title: '这是标题',
  content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
  cancelCb: function () {
    alert('点击取消');
  },
  confirmCb: function () {
    alert('点击确定');
    dialog.hide();
  }
});
/** 关闭 Dialog */
dialog.hide();
```

### 方式二：内联html文件
```bash
npm install wil-dialog
# 安装 raw-loader，要求版本号为 0.5.1 版本
npm install raw-loader@0.5.1
```
在 html 文件内使用 \<script\> 标签内联引入
```html
<script><%=require('raw-loader!wil-dialog/dist/dialog.min.js')%></script>
<script>
  dialog.show({
    // 配置项
  });
</script>
```
**由于此组件使用了`document.body`方法，所以必须在\<body\>标签内引用此组件，否则会出现报错;**，使用此方式引入组件。必须在最靠近 `<body>` 标签的位置使用 `<script>` 标签引入。

## API
### **dialog.show(Object object);**
> 显示 dialog ，Object 为必传参数

属性 | 类型 | 默认值 | 是否必填 | 说明  
-|-|-|-|-|
type | Number | 1 | 否 | 弹窗类型，1: 标题+正文+双按钮  2: 正文+单确认按钮 3: 标题+双按钮 4: 标题+正文+单确认按钮
title | String | '' | 否 | 自定义弹窗标题
content | String | '' | 否 | 自定义弹窗内容
cancel | String | '取消' | 否 | 自定义取消按钮文本内容
confirm | String | '确定' | 否 | 自定义确认按钮文本内容
cancelCb | Function | null | 否 | 点击取消按钮执行的回调函数，自动关闭弹窗
confirmCb | Function | null | 是 | 点击确认按钮执行的回调函数，不会自动关闭弹窗，需要调用`dialog.hide();`进行关闭

### **dialog.hide();**
> 关闭 dialog

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