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组件封装】。关注本栏目,将实时更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/28020.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年13个最适合销售电子书的WordPress主题

欢迎来到我们用于销售电子书和其他数字/可下载产品&#xff08;软件、应用程序、图标集、主题等&#xff09;的最佳WordPress主题的完整集合。 这些主题有内置的支付网关&#xff0c;可以通过 PayPal、信用卡等处理安全支付。&#xff08;易于配置&#xff01;&#xff09; 最…

如何进行文件映射

创建一个文件WebMvcConfig package com.itheima.config;import lombok.extern.slf4j.Slf4j; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.…

以行动诠释价值观。

随着科技的飞速发展&#xff0c;程序员在当今社会扮演着越来越重要的角色。他们不仅是推动技术革新的重要力量&#xff0c;也是企业核心竞争力的重要组成部分。对于程序员而言&#xff0c;职业素养是职业生涯中不可或缺的一部分&#xff0c;它决定了程序员的工作态度、价值观以…

红队攻防渗透技术实战流程:中间件安全:JettyJenkinsWeblogicWPS

红队攻防渗透实战 1. 中间件安全1.1 中间件-Jetty-CVE&信息泄漏1.2 中间件-Jenkins-CVE&RCE执行1.2.1 cve_2017_1000353 JDK-1.8.0_291 其他版本失效1.2.2 CVE-2018-10008611.2.3 cve_2019_100300 需要用户帐号密码1.3 中间件-Weblogic-CVE&反序列化&RCE1.4 应…

zip加密txt文件后,暴力破解时会有多个解密密码可以打开的疑问??

最近在做一个关于zip压缩文件解密的测试&#xff0c;发现通过暴力解密时&#xff0c;会有多个解密密码可以打开&#xff0c;非常疑惑&#xff0c;这里做个问题&#xff0c;希望能有大佬解惑。 1、首先在本地创建一个113449.txt的文件&#xff0c;然后右键txt文件选择压缩&…

【Android面试八股文】你能说一说线程池管理线程的原理吗?

面试官(Interviewer): 欢迎参加面试,今天我们会讨论一些关于 Java 线程池管理的问题。你能给我解释一下 ThreadPoolExecutor 是如何管理线程的吗? 候选人(Candidate): 当然可以,ThreadPoolExecutor 是 Java 中用于创建和管理线程池的核心类。它通过一组核心参数来控制线…

RoCE网络架构在高性能计算的应用

浅析RoCE在高性能计算的应用 在高性能计算(HPC)系统的发展初期,通常选择专业网络解决方案,如Myrinet、Quadrics和InfiniBand,而不是以太网解决方案。通过定制网络方案可以有效解决以太网解决方案的限制,增强带宽、降低延迟、改善拥塞控制。 2010年,IBTA推出了RoCE协议技…

Eplan 2023 学习

软件下载及安装教程网络上一堆&#xff0c;不再赘述&#xff0c;唯一的安装重点&#xff08;安装软件时最好断网&#xff09;&#xff0c;否则可能会出现装不了补丁等问题&#xff1b; 软件界面配色调整 软件安装完成后&#xff0c;如果对界面颜色不喜欢可以随时切换&#xff…

PyQT5 键盘模拟/鼠标连点器的实现

近来在玩一个游戏,找不到合适的鼠标连点器,不是有广告就是功能太复杂,自己写了一个,分享出来,如果有需要的可以自行运行研究。 准备工作 Python版本:Python 3.12.3;运行前确保pyQT5已经安装: pip install PyQt5程序运行界面: 程序代码: 通过引入单独的常量和变…

智能计算系统-概述

1、人工智能技术分层 2、人工智能方向人才培养 3、课程体系的建议 4、智能系统课程对学生的价值 5、智能计算系统对老师的价值 6、什么是智能计算系统 7、智能计算系统的形态 8、智能计算系统具有重大价值 9、智能计算系统的三大困难 10、开创深度学习处理器方向 11、寒武纪的国…

MySQL监控和日志管理:故障排查与性能分析

一、MySQL监控 一、监控工具介绍 MySQL自带了一些非常有用的监控工具。例如"SHOW STATUS"命令,它可以显示MySQL服务器的当前状态。此外,还有"SHOW PROCESSLIST"命令,它可以显示当前正在运行的进程。 另外,还有许多强大的第三方工具可供选择: **Percon…

用一个ESP32S3-Zero把有线键盘变为无线

三脚猫最近一直琢磨&#xff0c;那些喜欢买剪线键盘&#xff0c;以及自制键盘瞎折腾的人都是怎么搞的。经过不懈努力&#xff0c;终于想明白除了直接的硬件一个个pin针的高低电压判断后转给蓝牙&#xff0c;拿到现成的古董剪线键盘还有一个方式其实是在usb host转发给蓝牙类似这…

北斗三代一体式数传终端短报文

北斗三代一体式数传终端短报文M20C-V30针对船载通信和导航应用推出的一款支持北斗 RDSS/RNSS 功能的船载一体机。北斗数传终端内部集成了北斗多频天线、射频、基带以及主控等功能单元&#xff0c;可实现 RDSS 定位、短报文通信和 RNSS 导航定位等功能。M20C-V30型北斗数传终端体…

Java线程池的抛弃策略

Java线程池的抛弃策略 Java线程池是Java并发编程中非常重要的一个组件。它通过重用已创建的线程来减少线程创建和销毁的开销&#xff0c;从而提高应用程序的性能和响应速度。然而&#xff0c;当线程池中的任务数量超过其处理能力时&#xff0c;就需要一种机制来处理新提交的任…

Vue3 中 props 与 emit 用法

在 Vue3 中&#xff0c;props 和 emit 的用法有所改变&#xff0c;主要的变化在于它们现在都通过 setup 函数来访问和使用。 props: props 用于父组件向子组件传递数据。在 setup 函数中&#xff0c;props 是一个参数&#xff0c;我们可以通过它访问到父组件传入的所有 prop 值…

datax的安装及使用入门

1 下载解压Datax tar包 下载到自己指定的安装目录 #wget http://datax-opensource.oss-cn-hangzhou.aliyuncs.com/datax.tar.gz 进行解压 tar -zxvf datax.tar.gz 2 Datax验证 #修改datax/bin目录下datax.py的权限 chmod 777 datax/bin/datax.py 2.1运行官方给定的任务…

【Pandas驯化-03】Pandas中常用统计函数mean、count、std、info使用

【Pandas驯化-03】Pandas中常用统计函数mean、count、std、info使用 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内容文档获取 微…

[Bug]使用gradio创建应用提示AttributeError: module ‘gradio‘ has no attribute ‘inputs‘

源代码 import gradio as gr gr.Interface(fnpredict, inputsgr.inputs.Image(shape(512, 512)), outputsgr.outputs.Label(num_top_classes3) ).launch(shareTrue) 错误 ------------------------------------------------------…

力扣1818.绝对差值和

力扣1818.绝对差值和 把nums1拷贝复制一份 去重排序 对于每个nums2都找到差距最小的那个数(二分) 作差求最大可优化差值去重排序可以直接用set 自动去重排序了 const int N 1e97;class Solution {public:int minAbsoluteSumDiff(vector<int>& nums1, vector<i…

springboot集成shardingsphere-分库分表

导入maven依赖&#xff0c;如下 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><a…