【HarmonyOS 5.0.0 或以上】构建操作确认组件 ConfirmAction:二次确认 / 支持滑动确认 / 延迟倒计时按钮

🎯 目标

封装一个操作确认组件 ConfirmAction,适用于:

  • 高风险操作确认(如删除数据、清空缓存、退出登录)

  • 支持按钮二次确认模式(点击后确认/取消)

  • 支持滑动确认(向右滑动完成操作)

  • 支持倒计时按钮(如3秒后可点击)

  • 可拓展为图形验证码、手势确认、长按等多种确认方式


🧱 交互结构示意

[删除数据] → (点击后)确定删除? [✅确认] [✕取消]
或:
[👉 向右滑动确认]
或:
[3s后可点击确认按钮...]

🧰 组件实现:ConfirmAction.ets(支持点击确认模式 + 倒计时模式)

@Component
export struct ConfirmAction {
  @Prop label: string = '删除'
  @Prop type: 'click' | 'countdown' = 'click'
  @Prop countdownSeconds: number = 3
  @Prop onConfirm: () => void = () => {}

  @State confirming: boolean = false
  @State countdown: number = this.countdownSeconds

  aboutToAppear() {
    if (this.type === 'countdown') {
      this.startCountdown()
    }
  }

  build() {
    if (this.type === 'click') {
      return this.confirming
        ? Row({ space: 12 }) {
            Button('✅ 确认').type(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值