yycf-dialog

介绍

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

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

安装

   npm  install yycf-dialog 

效果预览

使用

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

我的个人博客

• 燕云长风

我的社交主页

1. 燕云长风知乎
2. 燕云长风知乎专栏
3. 燕云长风github
4. 燕云长风gitee
5. 燕云长风twitter
6. 燕云长风medium

开源许可证

MIT