鸿蒙开发定义全局公用弹框

鸿蒙Next开发定义全局公用弹框

定义全局公用弹框还是很有必要的,一般取消,确定用的都是同一个样式的弹框,这样app看起来统一,也好管理。

效果图如下

在这里插入图片描述
是否要取消按钮,确定按钮都是可以通过传参来控制的。
你们也可以看我b站视频,看完整效果
https://www.bilibili.com/video/BV1Lf421X7J3/

部分参考代码
/**
 *通用Dialog弹窗组件
 */
@CustomDialog
export struct CommonDialog {
  //自定义加载的内容
  @BuilderParam contentBuilder?: () => void
  //标题
  title: ResourceStr = $r('app.string.tip')
  //描述
  description:  ResourceStr = ''
  //确认按钮文案
  private positiveText:ResourceStr = $r('app.string.sure')
  //取消按钮文案
  private negativeText:ResourceStr = $r('app.string.cancel')
  //确认按钮回调
  positiveCallback?: () => void
  //取消按钮回调
   negativeCallback?: () => void
  //展示确认按钮
  private showPositive = true
  //展示取消按钮
  private showNegative = true
  //弹窗控制器
  controller: CustomDialogController

  aboutToAppear() {

  }

  build() {
    Stack() {
      Column() {
        Text(this.title)
          .fontSize($r('app.float.size_text_16'))
          .fontColor($r('app.color.color_black'))
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
          .height($r('app.float.size_text_50'))
          .textAlign(TextAlign.Center)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Divider().color($r('app.color.color_f5f5f5'))
        Text(this.description)
          .fontSize($r('app.float.size_text_15'))
          .fontColor($r('app.color.color_555'))
          .textAlign(TextAlign.Center)
          .padding($r('app.float.size_text_20'))
        Divider().color($r('app.color.color_f5f5f5')).padding(0)
        Row() {
          Text(this.negativeText)
            .flexShrink(1)
            .textAlign(TextAlign.Center)
            .layoutWeight(1)
            .visibility(this.showNegative ? Visibility.Visible : Visibility.None)
            .onClick(() => {
              this.negativeCallback?.()
              this.controller.close()
            })

有需要完整代码的可私信

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 中的全局信息弹框通常是指在整个应用范围内都需要显示的信息提示、警告或者是错误通知等,这类弹框在用户界面设计中常用于及时反馈系统状态、引导用户操作或是处理特殊情况。 ### 实现方式: #### 1. 使用第三方库 在React项目中引入一些流行的UI组件库如`antd`、`Material UI` 或 `react-bootstrap` 来创建全局信息弹框。例如,使用`antd`的`Message`组件可以轻松实现这样的功能。 ```javascript import React from 'react'; import { message } from 'antd'; function displayGlobalAlert() { message.success('这是一个全局成功的消息提示'); } // 调用此函数展示全局消息 displayGlobalAlert(); ``` #### 2. 自定义全局弹窗组件 对于更定制化的需求,可以在React中自定义一个全局弹窗组件。这个组件可以根据需要动态渲染,并且通过props传递消息内容、类型(如成功、失败、警告)、是否关闭按钮等属性。 ```javascript import React, { useState } from 'react'; import styled from 'styled-components'; const AlertWrapper = styled.div` /* 根据需求添加样式 */ `; function GlobalAlert({ type, content }) { const [isShown, setIsShown] = useState(true); return ( <AlertWrapper> {/* 根据type渲染不同的样式 */} {isShown && <div>{content}</div>} {/* 提供关闭按钮或其他交互元素 */} <button onClick={() => setIsShown(false)}>Close</button> </AlertWrapper> ); } // 使用示例 <GlobalAlert type="success" content="您已成功登录!" />; ``` #### 监听事件触发全局弹窗 在特定事件触发时(比如网络请求完成、数据加载结束、错误发生等),调用上述自定义的`GlobalAlert`组件或第三方库提供的API来展示弹窗。这通常涉及事件监听、响应逻辑和条件判断。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值