# wx-mini-dialog

> dialog for wechat miniprogram

Latest version **1.0.2** (published 2020-11-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install wx-mini-dialog
pnpm add wx-mini-dialog
yarn add wx-mini-dialog
bun add wx-mini-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.2 |
| Published | 2020-11-20 |
| First published | 2020-11-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | whyareyousodiors |
| Maintainers | whyareyousodiors |

## Links

- npm: https://www.npmjs.com/package/wx-mini-dialog
- Repository: https://github.com/WhyAreYouSoDiao/wx-mini-dialog
- Homepage: https://github.com/WhyAreYouSoDiao/wx-mini-dialog#readme
- Issues: https://github.com/WhyAreYouSoDiao/wx-mini-dialog/issues
- npm.io page: https://npm.io/package/wx-mini-dialog

## Recent versions

- 1.0.2 (latest) — 2020-11-20

## README

# wx-mini-dialog

微信小程序-弹窗组件

#### 使用

1. 安装
```bash
 npm install --save wx-mini-dialog
```

2. 安装完成之后执行npm构建，[小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)

3. 在你的页面json中添加
``` javascript
{
  "usingComponents": {
    "dialog":  "wx-mini-dialog"
  }
}
```

4. 在wxml中即可使用组件
``` html
 <button bindtap="changeStatus">button</button>
 <dialog visible="{{visible}}" bind:confirm="handleConfirm" bind:cancle="changeStatus">内容</dialog>
```

5. 在 js 文件中添加逻辑
``` javascript
Component({
  data: {
	visible: false	
  },
  changeStatus() {
	this.setData({ visible: !this.data.visible })
  },
  handleConfirm() {
	// do something
	this.changeStatus();
  }
})
```

#### 属性说明
|属性			 |类型		|默认值		|说明
|--             |--         |--         |--
|visible			|Boolean	|false		|控制弹窗显示隐藏
|type			|String		|center		|弹窗类型，有效值：center，bottom
|confirmText	|String		|确定		   |确认按钮文字内容
|cancleText		|String		|取消		   |取消按钮文字内容
|confirmColor	|String		|#07c160	|确认按钮颜色
|cancleColor	|String		|#666666	|取消按钮颜色
|showClose		|Boolean	|false		|是否显示 关闭按钮
|title			|String		|			|底部弹窗的标题
|showTitle  |Boolean  |     |底部弹窗是否展示标题

> tips：隐藏按钮只需要传入空字符串

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