# dialog

**Repository Path**: harmonyos4me/dialog

## Basic Information

- **Project Name**: dialog
- **Description**: 这是一个鸿蒙全局弹窗
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2025-04-15
- **Last Updated**: 2025-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dialog

#### 介绍 [English](README.en.md)

这是一个鸿蒙全局弹窗：alert 提示信息、open 中间弹窗、sheet 底部弹窗、picker 选择器弹窗、tel 打电话弹窗、input 输入框弹窗、time
时间选择弹窗、date 日期选择弹窗、calendar 日历选择弹窗、custom 自定义弹窗

#### 软件架构

基于系统 PromptAction 弹窗方法的扩展

| 主要功能   | 模块       | api                                  | 示例                                            |
|--------|----------|--------------------------------------|-----------------------------------------------|
| 提示弹窗   | alert    | `Dialog.alert({data:"alert"})`       | <img src="./example/alert.png" width="60">    |
| 中间弹窗   | open     | `Dialog.open({data:"open"})`         | <img src="./example/open.png" width="60">     |
| 底部弹窗   | sheet    | `Dialog.sheet({data:['sheet']})`     | <img src="./example/sheet.png" width="60">    |
| 选择器弹窗  | picker   | `Dialog.picker({data:['picker']})`   | <img src="./example/picker.png" width="60">   |
| 打电话弹窗  | tel      | `Dialog.tel("168********")`          | <img src="./example/tel.png" width="60">      |
| 输入框弹窗  | input    | `Dialog.input({data:"input"})`       | <img src="./example/input.png" width="60">    |
| 时间选择弹窗 | time     | `Dialog.time({data:new Date()})`     | <img src="./example/time.png" width="60">     |
| 日期选择弹窗 | date     | `Dialog.date({data:new Date()})`     | <img src="./example/date.png" width="60">     |
| 日历选择弹窗 | calendar | `Dialog.calendar({data:new Date()})` | <img src="./example/calendar.png" width="60"> |
| 自定义弹窗  | custom   | `Dialog.custom(wrap, params)`        | <img src="./example/custom.png" width="60">   |

#### 安装教程

`ohpm install @free/dialog`

#### 使用说明

1、引用头文件

```
import { Dialog } from '@free/dialog';

Dialog.alert("alert")
```

2、自定义弹窗--简单使用

```
import { CallBackDialogStatus, DialogBuilderParams, DialogStatus } from '../dialog/DialogBase'

@Builder
export function dialogBuilder(params: DialogBuilderParams) {
  Column() {
    Text(params.params.data)
  }
}


Dialog.custom(wrapBuilder(dialogBuilder), { data: "您好，这是一个自定义弹窗builder" })
```

3、自定义弹窗--实战

```
import { CallBackDialogStatus, DialogBuilderParams, DialogStatus } from '../dialog/DialogBase'

@Builder
export function dialogBuilder(params: DialogBuilderParams) {
  Column() {
    if (params.params.title) {
      Text(params.params.title)
        .fontSize(18)
        .textAlign(TextAlign.Center)
        .width('100%')
        .aspectRatio(6)
    }
    Blank()
    Scroll() {
      Text(params.params.data).width('90%').textAlign(TextAlign.Center).padding(10)
    }.scrollable(ScrollDirection.Vertical).constraintSize({ maxHeight: 200 })

    Blank()

    Row() {
      Text(params.params.cancel?.text ?? '取消')
        .onClick(() => {
          params.close({ status: CallBackDialogStatus.cancel, data: false })
        })
        .width('50%')
        .aspectRatio(3)
        .textAlign(TextAlign.Center)
        .fontColor(params.params.cancel?.fontColor)
        .backgroundColor(params.params.cancel?.backgroundColor)
      Divider().vertical(true).height('60%')
      Text(params.params.confirm?.text ?? '确认')
        .onClick(() => {
          params.close({ status: CallBackDialogStatus.confirm, data: true })
        })
        .width('50%')
        .aspectRatio(3)
        .textAlign(TextAlign.Center)
        .fontColor(params.params.confirm?.fontColor ?? '#009AFE')
        .backgroundColor(params.params.confirm?.backgroundColor)
    }
    .width('100%')
    .aspectRatio(6)
  }
  .width('70%')
  .visibility(params.status == DialogStatus.close ? Visibility.Hidden : Visibility.Visible)
  .transition(params.params.effect)
  .backgroundColor(Color.White)
  .borderRadius(10)
  .clip(true)
}

Dialog.custom(wrapBuilder(dialogBuilder), { data: "您好，这是一个自定义弹窗builder" })
```

加载框

`Loading.show()`

`Loading.success()`

`Loading.failure()`

`Loading.info()`

`Loading.warn()`

`Loading.progress({ msg: data, progress: 0 })`

`Loading.hide()`

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

#### 特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

#### 感谢

##### 开源组[harmony-free](https://gitee.com/harmony-free)欢迎大家加入

希望大家能够一起Fork代码，喜欢的话点个赞👍🏻