构建操作确认组件 Confirmable（操作按钮 + 二次确认弹窗） HarmonyOS 5.0.0 或以上

前端付豪3号

已于 2025-05-19 14:02:51 修改

阅读量385

点赞数 7

分类专栏：鸿蒙 x AI 产品实战文章标签： spring java 前端华为 harmonyos

于 2025-05-19 13:58:05 首次发布

本文链接：https://blog.csdn.net/2501_92052054/article/details/148062068

版权

鸿蒙 x AI 产品实战专栏收录该内容

75 篇文章

订阅专栏

✅ 背景说明

在企业系统中，涉及删除、清空、重置等不可逆操作时，必须加一道“二次确认”以防用户误操作，例如：

删除用户数据
清空缓存或配置
批量下线设备或关闭服务

如果每个页面都手动写一次 弹窗 + 确认逻辑，不仅重复，而且样式行为不统一。

本篇将封装一个通用的 Confirmable 操作确认组件，集成按钮点击 → 弹窗确认 → 回调执行的完整流程。

🧱 一、组件目标功能

包裹任意触发组件（如按钮 / 图标）
点击触发弹窗进行确认
支持自定义弹窗内容（标题 + 描述 + 按钮文案）
确认后执行回调操作
支持 disabled / loading 状态联动
支持插槽触发器组件

📦 二、组件结构定义

@Component
struct Confirmable {
  @Prop title: string = '确认操作';
  @Prop message: string = '此操作不可恢复，是否继续？';
  @Prop confirmText: string = '确定';
  @Prop cancelText: string = '取消';
  @Prop disabled: boolean = false;
  @Prop loading: boolean = false;
  @Prop onConfirm: () => void = () => {};
  @Slot trigger?: () => void;

  @State private visible: boolean = false;
}

🧩 三、组件逻辑实现

build() {
  Column() {
    // 触发按钮
    if (this.trigger) {
      this.trigger!().onClick(() => {
        if (!this.disabled && !this.loading) {
          this.visible = true;
        }
      })
    }

    // 弹窗确认
    if (this.visible) {
      Column()
        .position({ x: 0, y: 0 })
        .width('100%')
        .height('100%')
        .backgroundColor('#00000040')
        .zIndex(999)
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center) {

        Column({ space: 10 })
          .width('80%')
          .padding(20)
          .backgroundColor('#fff')
          .borderRadius(10) {
            Text(this.title).fontSize(18).fontWeight(FontWeight.Bold)
            Text(this.message).fontSize(14).color('#666')

            Row({ space: 10 }).justifyContent(SpaceBetween) {
              Button(this.cancelText).onClick(() => this.visible = false)
              Button(this.confirmText).type(ButtonType.Danger).onClick(() => {
                this.onConfirm();
                this.visible = false;
              })
            }
        }
      }
    }
  }
}

🧪 四、父组件使用示例

✅ 删除按钮二次确认

Confirmable({
  title: '删除用户',
  message: '删除后将无法恢复，确定继续？',
  onConfirm: () => this.deleteUser()
}) {
  SmartButton({ text: '删除', type: 'danger' })
}

✅ 图标触发确认操作

Confirmable({
  title: '关闭服务',
  message: '关闭后将中断所有连接，是否继续？',
  onConfirm: () => this.shutdown()
}) {
  Image('/icons/shutdown.svg').width(20).height(20)
}

⚠️ 五、常见问题与建议

问题	原因	建议
弹窗未关闭	回调未关闭 `visible`	onConfirm 后主动关闭弹窗
多次点击误操作	未处理 loading 状态	可结合 loading/disabled 禁用多次触发
弹窗样式不一致	每页手写确认框	建议统一使用 Confirmable 控制风格和行为

🚀 六、拓展建议

支持 loading 状态 + 回调异步（Promise 模式）
与 PermissionView 组合形成 SecureAction
弹窗居中动画 / 淡入淡出效果
多级确认（高风险操作需输入“确认”文本）
支持通知或日志记录执行操作内容

✅ 小结

本篇构建了一个操作确认通用组件 Confirmable，将危险操作从“按钮触发”到“确认弹窗”进行完整封装，提高了产品安全性与交互一致性，适用于几乎所有需要“确认提示”的场景。

下一篇将进入第20篇，也是本系列前20篇的收尾文章：

《第20篇：构建模块级配置注入器 ConfigProvider（主题 / 权限 / API 注入统一管理）》