当前位置: 首页 > news >正文

React+TS前台项目实战(六)-- 全局常用组件Button封装

文章目录

  • 前言
  • Button组件
    • 1. 功能分析
    • 2. 代码+注释说明
    • 3. 使用方式
    • 4. 效果展示
    • (1)有加载动画,执行promise函数
    • (2)无加载动画,执行click事件
  • 总结


前言

今天这篇主要讲全局按钮组件封装,可根据UI设计师要求自定义修改。


Button组件

1. 功能分析

(1)可以通过className属性自定义按钮样式,传递样式类名来修改按钮的样式
(2)是否可点击由disabled属性控制,当disabled为true时,按钮被禁用
(3)加载状态由loading属性控制,当loading为true时,按钮显示加载动画
(4)当点击事件回调是Promise函数,执行后续处理;否则直接调用click点击事件

2. 代码+注释说明

// @/components/Button/index.tsx
import { useState } from "react";
import classNames from "classnames";
import styles from "./index.module.scss";// 组件的属性类型
type Props = {// 按钮的文本text: string;// 自定义的类名className?: string;// 是否禁用按钮disabled?: boolean;// 是否显示加载动画loading?: boolean;// 点击按钮时的回调函数click?: () => void;beforeChange?: (() => Promise<any>) | undefined;
};// 按钮组件
export default (props: Props) => {// 解构属性const { text, className, disabled, loading, beforeChange, click } = props;const [load, setLoad] = useState(false);/*** 点击按钮时的事件处理函数* - 如果按钮被禁用,则直接返回* - 如果 beforeChange 是一个Promise函数,则调用其后续处理* - 否则直接调用 click*/const handleClick = () => {if (disabled) return undefined;const isFunction = Object.prototype.toString.call(beforeChange) === "[object Function]";if (!isFunction) {click?.();return false;}// 启用加载动画setLoad(true);beforeChange?.().finally(() => setLoad(false));};return (// 按钮元素<buttontype="button"// 设置类名className={classNames(styles.container,// 禁用或加载时增加特定的类名(disabled || loading) && styles.isDisabled,className)}// 禁用时禁用快捷键操作onKeyDown={handleClick}// 禁用时禁用点击事件onClick={handleClick}>{/* 加载动画 */}{loading && load && <i className={`${styles.loading} iconfont icon-loading`}></i>}{/* 按钮文本 */}<span>{text}</span></button>);
};
------------------------------------------------------------------------------
// @/components/Button/index.module.scss
.container {display: flex;align-items: center;justify-content: center;width: 100%;height: 40px;color: #fff;background-color: var(--cd-primary-color);border-radius: 4px;border: none;cursor: pointer;span {font-size: 14px;line-height: 14px;}&:hover {background-color: var(--cd-primary-color);}.isDisabled {opacity: 0.5;cursor: not-allowed;}@keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}}.loading {font-size: 24px;animation: rotate 2s linear infinite;}
}

3. 使用方式

// 引入组件
import Button from "@/components/Button";
// 有加载动画使用方式
<Button text="有loading" loading={true} beforeChange={onDoneChange}></Button>
// 点击按钮触发loading
const onDoneChange = () => {return new Promise((resolve) => {setTimeout(() => {console.log("onDoneChange");resolve(true);}, 2000);});
};-----------------------------------------------------------------------------------------------------// 无加载动画使用方式
<Button text="有loading" loading={false} beforeChange={onDoneClick}></Button>
// 点击按钮不触发loading
const onDoneClick = () => {console.log("onDoneClick");
};

4. 效果展示

(1)有加载动画,执行promise函数

在这里插入图片描述
在这里插入图片描述

(2)无加载动画,执行click事件

)


总结

下一篇讲【全局模态框Modal组件、公共弹窗Dialog组件封装】。关注本栏目,将实时更新。

相关文章:

React+TS前台项目实战(六)-- 全局常用组件Button封装

文章目录 前言Button组件1. 功能分析2. 代码注释说明3. 使用方式4. 效果展示&#xff08;1&#xff09;有加载动画&#xff0c;执行promise函数&#xff08;2&#xff09;无加载动画&#xff0c;执行click事件 总结 前言 今天这篇主要讲全局按钮组件封装&#xff0c;可根据UI设…...

Vite支持的React项目使用SASS指南

前言 在现代前端开发中&#xff0c;SASS是一种广受欢迎的CSS扩展语言&#xff0c;它提供了许多实用功能&#xff0c;如变量、嵌套、部分和混合等。 本教程将指导您在一个使用Vite作为构建工具的React项目中如何配置和使用SASS。 使用步骤 1、创建一个Vite React项目 首先确…...

实验12 路由重分布

实验12 路由重分布 一、 原理描述二、 实验目的三、 实验内容四、 实验配置五、 实验步骤 一、 原理描述 在大型网络的组建过程中&#xff0c;隶属不同机构的网络部分往往会根据自身的实际情况来选用路由协议。例如&#xff0c;有些网络规模很小&#xff0c;为了管理简单&…...

version-manager最好用的SDK版本管理器,v0.6.2发布

项目地址&#xff1a;https://github.com/gvcgo/version-manager 中文文档&#xff1a;https://gvcgo.github.io/vdocs/#/zh-cn/introduction 功能特点&#xff1a; 跨平台&#xff0c;支持Windows&#xff0c;Linux&#xff0c;MacOS支持多种语言和工具&#xff0c;省心受到…...

MFC工控项目实例之三theApp变量传递对话框参数

承接专栏《MFC工控项目实例之二主菜单制作》 用theApp变量传递对话框参数实时改变iPlotX坐标轴最小值、最大值。 1、新建IDD_SYS_DATA对话框&#xff0c;类名SYS_DATA。 三个编辑框IDC_EDIT1、IDC_EDIT2、IDC_EDIT3变量如图 2、SEAL_PRESSURE.h中添加代码 #include "re…...

C# OpenCvSharp 图像处理函数-图像拼接-hconcat、vconcat、Stitcher

在图像处理和计算机视觉领域,图像拼接是一个常见的操作。OpenCvSharp是一个用于.NET平台的OpenCV封装库,可以方便地进行图像处理。本文将详细介绍如何使用OpenCvSharp中的hconcat、vconcat函数以及Stitcher类进行图像拼接,并通过具体示例帮助读者理解和掌握这些知识点。 函…...

软件方案评审与模块优化:从FOC模块出发的电控平台建设

一、背景 洞悉模块发展趋势&#xff0c;定制行业应用特点&#xff0c;明确优化方向与阶段性目标 随着科技进步的飞速发展&#xff0c;模块化设计已成为众多行业产品开发的核心理念。无论是软件系统、硬件组件&#xff0c;还是复杂系统中的功能模块&#xff0c;都需要对其发展…...

emoji_call_read

这道题我觉得可以记录一下。 主要函数&#xff0c;一样&#xff0c;先考虑怎么泄露libc基址。 但&#xff0c;0x20实在太小&#xff0c;组成不了连续3个ret syscall。 而且文件中也没pop rdi;ret这个gadget&#xff0c;只能另寻他法。 我们注意到&#xff1a; main函数中的这…...

一键自动粘贴,高效处理邮箱地址,让你的工作效率翻倍提升!

在信息爆炸的时代&#xff0c;邮箱地址已成为我们日常工作和生活中的必备元素。无论是商务沟通、报名注册还是信息传递&#xff0c;邮箱地址都扮演着至关重要的角色。然而&#xff0c;手动复制粘贴邮箱地址的繁琐操作往往让人头疼不已&#xff0c;不仅效率低下&#xff0c;还容…...

【Java】Java 使用 Graphics2D 在图片上添加文字,并解决图片变红问题

文章目录 【Java】Java 使用 Graphics2D 在图片上添加文字&#xff0c;并解决图片变红问题完整案例 【Java】Java 使用 Graphics2D 在图片上添加文字&#xff0c;并解决图片变红问题 完整案例 public static void main(String[] args) {try {String filePath "D:\\Works…...

初识docker插件

文章目录 一、Docker插件概述二、Docker插件的优势三、Docker插件的使用例子1. 安装Docker插件2. 启用Docker插件3. 创建卷并使用 四、常用的Docker插件五、总结 Docker插件&#xff08;Docker Plugin&#xff09;是Docker扩展功能的一种重要方式&#xff0c;它允许用户为Docke…...

springboot整合redis以及使用

在Spring Boot中整合Redis&#xff0c;并使用Redis作为缓存或数据存储&#xff0c;是非常常见和有用的场景。Redis作为一种高性能的键值存储系统&#xff0c;可以用来加速数据访问、会话管理、消息队列等多种用途。下面是整合和使用Redis的基本步骤&#xff1a; 1. 添加Redis依…...

ARM32开发--电源管理单元

知不足而奋进 望远山而前行 目录 文章目录 前言 学习目标 学习内容 PMU 电源域 VDD/VDDA域 备份域 1.2V域 省电模式 睡眠模式 深度睡眠模式 待机模式 几种模式总结 WFI和WFE指令 案例需求 模式初始化 源码 总结 前言 在嵌入式系统中&#xff0c;有效的电池管…...

Android Studio项目升级报错:Namespace not specified

原项目升级AGP到8.0时报错&#xff1a; Namespace not specified. Specify a namespace in the modules build file: C:\Users\Administrator\Desktop\MyJetpack\app\build.gradle. See https://d.android.com/r/tools/upgrade-assistant/set-namespace for information about…...

渗透测试nginx增加400,500报错页面

nginx增加400,500报错页面 在Nginx中增加自定义的400和500错误页面&#xff0c;你需要编辑Nginx配置文件&#xff0c;通常这个文件位于 /etc/nginx/nginx.conf 或者 /etc/nginx/conf.d/default.conf&#xff0c;或者在 /usr/local/nginx/conf/nginx.conf &#xff08;如果你是…...

OpenCV读取和显示和保存图像

# 导入 OpenCV import cv2 as cv # 读取图像 image cv.imread(F:\\mytupian\\xihuduanqiao.jpg) # 创建窗口 #显示图像后&#xff0c;允许用户随意调整窗口大小 cv.namedWindow(image, cv.WINDOW_NORMAL) # 显示图像 cv.imshow(image, image)# 将图像保存到文件 success cv…...

【面经总结】Java集合 - Map

Map 概述 Map 架构 HashMap 要点 以 散列(哈希表) 方式存储键值对&#xff0c;访问速度快没有顺序性允许使用空值和空键有两个影响其性能的参数&#xff1a;初始容量和负载因子。 初始容量&#xff1a;哈希表创建时的容量负载因子&#xff1a;其容量自动扩容之前被允许的最大…...

CompletableFuture方法介绍及代码示例

CompletableFuture 是 Java 8 引入的一个类&#xff0c;用于支持异步编程。它实现了 Future 接口&#xff0c;并提供了非常强大的功能来处理异步操作。下面是 CompletableFuture 的一些关键内部方法及其详细解释。 基础方法 1. supplyAsync 和 runAsync&#xff1a; - supplyA…...

基于springboot的宠物商城网站

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于springboot的宠物商城网站,java项目…...

DM存储ontap系统修改管理IP

存储已配置完成在使用&#xff0c;修改管理ip不会影响生产 旧管理IP新管理IP192.0.2.1/24192.0.10.1/24192.0.2.2/24192.0.10.2/24192.0.2.3/24192.0.10.3/24 旧网关&#xff1a;192.0.2.254 新网关&#xff1a;192.0.10.254 查看现有的管理IP信息 cluster1::> network …...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...