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

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础(单文件 YAML 版)(一)配置原理与优势(二)实操示例二、多环境开发多文件版

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》:本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言:为什么"相等"判断如此重要?方法1:使用some()+includes()(适合小数组)方法2

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1