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

本文主要是介绍React+TS前台项目实战(十七)-- 全局常用组件Dropdown封装,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • Dropdown组件
    • 1. 功能分析
    • 2. 代码+详细注释
    • 3. 使用方式
    • 4. 效果展示
  • 总结


前言

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


Dropdown组件

1. 功能分析

(1)通过position属性,可以控制下拉选项的位置
(2)通过传入width属性, 可以自定义下拉选项的宽度
(3)通过传入className属性, 可以自定义加载动画的样式

2. 代码+详细注释

// @/components/Dropdown/index.tsx
import { useState } from 'react'
import classNames from "classnames";
import { DropDownContainer, DropDown } from './styled'
import Button from '@/Button'
// 组件的属性类型
type Options = {// 下拉选项的文本name: string// 下拉选项自定义类名value: string
}
// 组件的属性类型
type Props = {data: Options[]position?: stringwidth?: stringname: stringclassName?: string
};
export default ({data,position,width,name,
}: Props) => {// 是否显示下拉选项const [showDropDown, setShowDropDown] = useState(false)// 下拉选项位置const dropdownPosition: string = position ?? 'left'// 下拉框宽度,默认100%const dropdownWidth: string = width ?? '100%'// 下拉选项点击事件const handlerItemClick = () => {setShowDropDown(false)}return (<><DropDownContainer  className={classNames(className)}width={dropdownWidth} onMouseLeave={handlerItemClick}><ButtonclassName="dropdown-button"onMouseOver={() => {setShowDropDown(true)}}><div className={classNames('dropdown-button-content')}><divclassName={classNames('dropdown-button-title')}style={{textTransform: 'uppercase',}}>{name}</div><div className={classNames('dropdown-arrow')}>&gt;</div></div></Button>{showDropDown && (<DropDown position={dropdownPosition} onMouseLeave={ handlerItemClick }><>{data.map((item, index) => (<><Button key={index} className={classNames('dropdown-item')} onClick={ handlerItemClick }>{item.name}</Button>{index !== data.length - 1 && <div className={classNames('dropdown-separate')}></div>}</>))}</></DropDown>)}</DropDownContainer></>)
}------------------------------------------------------------------------------
// @/components/Dropdown/styled.tsx
import styled from "styled-components";
interface DropDownProps {width: string;
}
interface DropDownItemProps {position: string;
}
export const DropDownContainer = styled.div<DropDownProps>`display: flex;align-items: center;height: 100%;margin-top: 1px;padding: 10px 0;position: relative;width: ${({ width }) => width};@media (max-width: 750px) {margin-right: 0;}color: ${(props) => props.theme.primary};.dropdown-button-content {display: flex;align-items: center;.dropdown-arrow {font-size: 18px;margin-left: 4px;transform: rotate(90deg);}}&:hover {.dropdown-arrow {transform: rotate(270deg);}}
`;
export const DropDown = styled.div<DropDownItemProps>`display: flex;flex-direction: column;align-items: flex-start;min-width: 130px;color: #000;background: #fff;border-radius: 5px;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 50%);z-index: 1000;position: absolute;top: 45px;left: ${({ position }) => (position === "left" ? 0 : "auto")};right: ${({ position }) => (position === "right" ? 0 : "auto")};.dropdown-item {display: flex;align-items: center;width: 94%;height: 33px;margin: 3px 3% 0;padding: 0 3%;font-size: 12px;white-space: nowrap;border-radius: 3px;cursor: pointer;&:hover {background: #f1f1f1;color: var(--cd-primary-color);}}.dropdown-separate {width: 88%;height: 0.5px;border: solid 0.5px #c3c3c3;margin: 0 6%;}
`;

3. 使用方式

// 引入组件
import Dropdown from '@/components/Dropdown'
// 使用
<Dropdowndata={[{ name: '下拉选项111111', value: '434432' },{ name: '下拉选项222222', value: '434432' },{ name: '下拉选项333333', value: '434432' },]}position="left"width="100px"name="dropdown"
/>

4. 效果展示

(1)左对齐
在这里插入图片描述

(2)右对齐
在这里插入图片描述


总结

下一篇讲【高阶渲染劫持组件封装】。关注本栏目,将实时更新。

这篇关于React+TS前台项目实战(十七)-- 全局常用组件Dropdown封装的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1090265

相关文章

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

golang中reflect包的常用方法

《golang中reflect包的常用方法》Go反射reflect包提供类型和值方法,用于获取类型信息、访问字段、调用方法等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值... 目录reflect包方法总结类型 (Type) 方法值 (Value) 方法reflect包方法总结

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

MySQL中的锁机制详解之全局锁,表级锁,行级锁

《MySQL中的锁机制详解之全局锁,表级锁,行级锁》MySQL锁机制通过全局、表级、行级锁控制并发,保障数据一致性与隔离性,全局锁适用于全库备份,表级锁适合读多写少场景,行级锁(InnoDB)实现高并... 目录一、锁机制基础:从并发问题到锁分类1.1 并发访问的三大问题1.2 锁的核心作用1.3 锁粒度分

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

python常用的正则表达式及作用

《python常用的正则表达式及作用》正则表达式是处理字符串的强大工具,Python通过re模块提供正则表达式支持,本文给大家介绍python常用的正则表达式及作用详解,感兴趣的朋友跟随小编一起看看吧... 目录python常用正则表达式及作用基本匹配模式常用正则表达式示例常用量词边界匹配分组和捕获常用re

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景