🎯 目标
封装一个操作确认组件 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(

1万+

被折叠的 条评论
为什么被折叠?



