# yycf-dialog

> angular dialog component

Latest version **10.0.1** (published 2019-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install yycf-dialog
pnpm add yycf-dialog
yarn add yycf-dialog
bun add yycf-dialog
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 10.0.1 |
| Published | 2019-07-02 |
| First published | 2019-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 46.5 KB |
| Known vulnerabilities | 0 (+23 in 5 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | yanyunchangfeng |
| Keywords | dialog, loading, message, confirm, angular, modal, yycf |

## Links

- npm: https://www.npmjs.com/package/yycf-dialog
- Repository: https://github.com/yanyunchangfeng/tyht
- Homepage: https://github.com/yanyunchangfeng/tyht#readme
- Issues: https://github.com/yanyunchangfeng/tyht/issues
- npm.io page: https://npm.io/package/yycf-dialog

## Dependencies (16)

- [rxjs](https://npm.io/package/rxjs.md) ^6.3.3
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [echarts](https://npm.io/package/echarts.md) ^4.2.0-rc.1
- [primeng](https://npm.io/package/primeng.md) ^6.1.3
- [zone.js](https://npm.io/package/zone.js.md) ~0.9.1
- [primeicons](https://npm.io/package/primeicons.md) ^1.0.0-beta.10
- [wangeditor](https://npm.io/package/wangeditor.md) ^3.1.1
- [@angular/core](https://npm.io/package/@angular/core.md) ^8.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^8.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^8.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^8.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^8.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^8.0.0
- [@ngx-progressbar/core](https://npm.io/package/@ngx-progressbar/core.md) ^5.1.2
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^8.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^8.0.0

## 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

- 10.0.1 (latest) — 2019-07-02
- 10.0.0 — 2019-06-07
- 9.9.0 — 2019-05-29
- 9.8.0 — 2019-05-29
- 9.7.0 — 2019-05-18
- 9.6.0 — 2019-05-17
- 9.5.0 — 2019-05-17
- 9.4.0 — 2019-05-17
- 9.3.0 — 2019-05-17
- 9.2.0 — 2019-05-17
- 9.1.0 — 2019-05-17
- 9.0.0 — 2019-05-17
- 8.0.3 — 2019-05-16
- 8.0.1 — 2019-05-16
- 8.0.0 — 2019-05-16
- … 7 more at https://npm.io/package/yycf-dialog/versions

## README

<p align="center">
    <img width="300" src="src/assets/img/yanyunchangfeng.png">
</p>

##  介绍
你好，我是徐晓东，笔名[燕云长风](https://yanyunchangfeng.com)。大漠穷秋于 2019-03-16 21:22 赠此笔名。   
寓意：结合李白著名的边塞诗《关山月》取【燕云长风】—— 长风几万里，吹度玉门关。

yycf-dialog 是一个基于Angular开发的通用业务组件库，包含Loading, Message, Confirm

## 安装
```
   npm  install yycf-dialog 
```

## 效果预览

  <p align="center">
    <img  width ="300" src="./src/assets/img/s1.png">
  </p>  

  <p align="center">
    <img  width ="300" src="./src/assets/img/s2.png">
  </p>
    
  <p align="center">
    <img  width ="300" src="./src/assets/img/s3.png">
  </p>


## 使用

```
import { DialogModule, DialogService} from 'yycf-dialog/components';

<yycf-dialog [key]="'1'"></yycf-dialog>
<yycf-dialog [key]="'2'"></yycf-dialog>
<yycf-dialog [key]="'3'"></yycf-dialog>

//自定义的footer button 需要自定义button样式，或者直接使用其他组件库的button
<yycf-dialog [key]="'4'" #ct>
  <yycf-footer>
    <button class="customButtonClass" (click)="ct.accept()">确定<button>
    <button class="customButtonclass" (click)="ct.reject()">取消<button>
  <yycf-footer>
<yycf-dialog>

export class DialogDemo  implements OnInit{ 
           
    constructor(private dialogService: DialogService) {}
 
    ngOnInit(){

     this.dialog.confirm(
      {
        message:'确定要删除吗?',
        header:'warning',
        okVisible:true,
        offVisible:true,
        okButton:'blue',
        offButton:'green',
        okLabel:``,
        key:"1",
        offLabel: ``,
        accept:()=>{
              this.dialog.confirm({
                message:'已删除',
                header:'ok',
                okVisible:true,
                offVisible:false,
                okButton:'blue',
                offButton:'red',
                okLabel:``,
                key:"2",
                // delay:3000,
                offLabel: ``,
                accept:()=>{
                  this.dialog.confirm({
                    message:'正在拼命加载……',
                    header:'waiting',
                    okVisible:false,
                    offVisible:false,
                    okButton:'blue',
                    offButton:'green',
                    okLabel:``,
                    key:"3",
                    // delay:3000,
                    offLabel: ``,
                  })

                },
                reject:()=>{

                }
              })
        },
        reject:()=>{

        }
      });
   }
}
```

| 参数     | 说明         | 类型         | 默认值 | 
|----------|-------------|-------------|-------|
| key   | 标识当前对话框的唯一性 | string     | null  |
| width   | 设置对话框宽度 | string     | auto  |
| height   | 设置对话框高度 | string     | auto  |
| opacity   | 设置对话框透明度 | number   | .5  |
| message   | 设置对话框标题 | string     | yycf-dialog component|
| header    | 对话框的类型   | 'waiting' 'ok' 'warning' | 'waiting'|
| okVisible   | 确定按钮的可见性 | boolean    | true  |
| offVisible   | 取消按钮的可见性 | boolean     | true  |
| okButton   | 确定按钮的颜色| 'blue'  'green'  'red'     | 'blue'  |
| offButton   | 取消按钮的颜色 | 'blue'  'green' 'red'     | 'green' |
| okLabel   | 确定按钮的内容|  string           | 确定 |
| offLabel   | 取消按钮的内容 | string         | 取消  |
| delay      | 指定对话框的生命周期| number (ms) |  null  |
| accept      | 确定按钮的回调函数| Function    |  null  |
| reject      | 取消按钮的回调函数| Function    |  null  |  
 
## PS:若回调函数的返回值为false ，则执行后不关闭对话框


## DialogService API  
 
  |名称    | 参数       |    描述  |
  |--------|----------|-------|
  |confirm |  object   | 创建对话框|
  |close   | 无        | 关闭对话框|  


  


  ``` 
      let dia = this.dialog.confirm({
        message:'正在拼命加载',
        header:'warning',
        okVisible:true,
        offVisible:true,
        okButton:'blue',
        offButton:'green',
        okLabel:``,
        offLabel: ``,
      });

      setTimeout(() => dia.close(),3000)

  ```

  


## 我参与的系列项目

1. [NiceFish]( https://gitee.com/mumu-osc/NiceFish)：美人鱼，这是一个微型Blog系统，前端基于Angular7.0 + PrimeNG7.1.0。（GVIP 码云最有价值的开源项目 3192 ☆)
2. [NiceFish-React]( https://gitee.com/mumu-osc/NiceFish-React)：这是React版的实现，和 NiceFish Angular 版本保持风格一致。采用React Hooks 16.8.3 版本，使用TypeScript、Ant Design组件库以及Bootstrap v4.2.1 开发。  (7 ☆)
3. [OpenWMS-Frontend](https://gitee.com/mumu-osc/OpenWMS-Frontend)：OpenWMS项目前端基于 Angular 7.0 + PrimeNG 7.1.0。  (已推荐 199 ☆)
4. [nicefish-spring-cloud](https://gitee.com/mumu-osc/nicefish-spring-cloud)：这是NiceFish的服务端代码，基于SpringCloud。已经完成了一些基本的功能，如 SpringSecurity+OAuth2+JWT 实现SSO，文章、用户、评论等的分页查询等。如果你需要与这个后端代码进行对接，请检出本项目的 for-spring-cloud 分支。 (已推荐 117 ☆)

## 我的个人博客  

* [燕云长风](https://yanyunchangfeng.com)  

## 我的社交主页  

1. [燕云长风知乎](https://zhihu.com/people/hbxyxuxiaodong)  
2. [燕云长风知乎专栏](https://zhuanlan.zhihu.com/yanyunchangfeng)  
3. [燕云长风github](https://github.com/yanyunchangfeng)  
4. [燕云长风gitee](https://gitee.com/yanyunchangfeng)  
5. [燕云长风twitter](https://twitter.com/yanyunchangfeng)  
6. [燕云长风medium](https://medium.com/@yanyunchangfeng)  
 
## 开源许可证

MIT

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