10.0.1 • Published 2 years ago

yycf-dialog v10.0.1

Weekly downloads
4
License
MIT
Repository
github
Last release
2 years ago

介绍

你好,我是徐晓东,笔名燕云长风。大漠穷秋于 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标识当前对话框的唯一性stringnull
width设置对话框宽度stringauto
height设置对话框高度stringauto
opacity设置对话框透明度number.5
message设置对话框标题stringyycf-dialog component
header对话框的类型'waiting' 'ok' 'warning''waiting'
okVisible确定按钮的可见性booleantrue
offVisible取消按钮的可见性booleantrue
okButton确定按钮的颜色'blue' 'green' 'red''blue'
offButton取消按钮的颜色'blue' 'green' 'red''green'
okLabel确定按钮的内容string确定
offLabel取消按钮的内容string取消
delay指定对话框的生命周期number (ms)null
accept确定按钮的回调函数Functionnull
reject取消按钮的回调函数Functionnull

PS:若回调函数的返回值为false ,则执行后不关闭对话框

DialogService API

名称参数描述
confirmobject创建对话框
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

10.0.1

2 years ago

10.0.0

2 years ago

9.9.0

2 years ago

9.8.0

2 years ago

9.7.0

2 years ago

9.6.0

2 years ago

9.5.0

2 years ago

9.4.0

2 years ago

9.3.0

2 years ago

9.2.0

2 years ago

9.1.0

2 years ago

9.0.0

2 years ago

8.0.3

2 years ago

8.0.1

2 years ago

8.0.0

2 years ago

7.0.2

2 years ago

7.0.1

2 years ago

7.0.0

2 years ago

6.0.0

2 years ago

5.0.0

2 years ago

4.0.0

2 years ago

3.0.0

2 years ago