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)右对齐
在这里插入图片描述


总结

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

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

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

相关文章

注塑件检测视觉检测中可能遇到的外观缺陷

机器视觉检测注塑件不良特征有哪些&#xff1f;按照检测需求一般分为两类&#xff1a;外观缺陷和尺寸缺陷。但由于注塑件的工艺特点及原材料特性&#xff0c;注塑件外观缺陷在生产过程中出现的概率于频率远远大于尺寸缺陷。 注塑件检测视觉检测中可能遇到的外观缺陷 1、色差&a…

竞赛选题 python+opencv+深度学习实现二维码识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; pythonopencv深度学习实现二维码识别 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 该项目较为新颖&…

Vue核心指令解析:探索MVVM与数据操作之美

文章目录 前言一、Vue.js1. MVVM模式介绍2. 单页面组件介绍及案例讲解3. 插值表达式介绍及案例讲解 二、Vue常用指令详解1. 数据绑定指令v-textv-html 2. 条件渲染指令v-ifv-show 3. 列表渲染指令v-for循环数组介绍及案例讲解循环对象介绍及案例讲解 4. 事件监听指令v-on事件修…

Oracle-重启数据库及可能遇到的问题

1、登录到oracle用户 su - oracle2、关闭监听 lsnrctl stop3、杀掉oracle有关进程 #下面两条命令结合成一条 ps -ef|grep $ORACLE_SID|grep -v ora_|grep LOCALNO|awk {print $2}|xargs kill -9#查询pid ps -ef|grep $ORACLE_SID|grep -v ora_|grep LOCALNO|awk {print $2}…

公共筛选组件(二次封装antd)支持代码提示

如果项目是基于antd组件库为基础搭建&#xff0c;可使用此公共筛选组件 使用到的库 npm i antd npm i lodash-es npm i types/lodash-es -D/components/CommonSearch index.tsx import React from react; import { Button, Card, Form } from antd; import styles from ./…

高晓松音频 百度网盘,高晓松音频 百度网盘资源,百度云大全

讲座主要围绕分享了自己的心得和体会&#xff0c;以及对产业现状的深刻洞察。认为&#xff0c;不仅是一种艺术形式&#xff0c;更是一种生活方式。他鼓励年轻人要勇于追求自己的音乐梦想&#xff0c;同时也要关注音乐产业的发展趋势&#xff0c;为音乐产业的繁荣贡献自己的力量…

DDei在线设计器-API-DDeiSheet

DDeiSheet DDeiSheet是代表一个页签&#xff0c;一个页签含有一个DDeiStage用于显示图形。   DDeiSheet实例包含了一个页签的所有数据&#xff0c;在获取后可以通过它访问其他内容。DDeiFile中的sheets属性记录了当前文件的页签列表。 一个DDeiFile实例至少包含一个DDeiSheet…

【人工智能】百度文心一言智能体:AI领域的新里程碑

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

讯飞星火超自然语言合成的完整Demo

依赖文件和功能 requirements.txt 该文件列出了所需的依赖包。 data.py 定义了应用的配置信息&#xff0c;如APPId&#xff0c;APIKey&#xff0c;APISecret等。包含请求数据和请求URL。 main.py 主程序&#xff0c;设置了WebSocket连接&#xff0c;定义了处理消息的各个回调函…

度假酒店新风尚:可视化管理解决方案引领行业变革

在繁忙的都市生活中&#xff0c;度假酒店成了许多人逃离喧嚣、寻找宁静的首选之地。然而&#xff0c;随着旅游业的蓬勃发展&#xff0c;度假酒店面临的挑战也日益增多。如何提升服务质量、确保客人满意度、优化运营效率&#xff0c;成为了摆在各大度假酒店面前的难题。 传统的酒…

小红书商家电话采集软件使用指南

使用小红书商家电话采集软件可以提高商家电话的采集效率&#xff0c;以下是使用指南及附带代码。 步骤一&#xff1a;安装Python和相关库 首先&#xff0c;确保你的电脑已经安装了Python运行环境&#xff08;建议安装Python3版本&#xff09;。安装完成后&#xff0c;同样需要…

《代码整洁之道》精华速览,助你提升代码质量

最近重读了一遍《代码整洁之道》&#xff0c;这本书既是整洁代码的定义&#xff0c;也是写出整洁代码的指南。我认为既适合新手阅读&#xff0c;快速提升代码质量&#xff1b;也适合老鸟阅读&#xff0c;持续精进。本篇将汇总《代码整洁之道》的必读要点&#xff0c;把书读薄&a…

客户端从服务器端获取图片场景,加入CDN的实施方案

场景 浏览器&#xff08;客户端&#xff09;发送获取图片的请求&#xff0c;参数1—指定文件夹&#xff0c;参数2—指定文件夹中的指定图片名称&#xff08;数字编号&#xff09;作为开始&#xff0c;然后web服务器端通过websocket的方式从指定图片开始源源不断的按照顺序依次…

Java中的NIO编程实践精华

Java中的NIO编程实践精华 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java网络编程中&#xff0c;NIO&#xff08;New I/O&#xff09;是一种基于通道和…

人工智能机器学习算法总结偏差和方差

1.定义 在机器学习中&#xff0c;偏差&#xff08;Bias&#xff09;和方差&#xff08;Variance&#xff09;是评估模型泛化能力的重要概念。它们描述了模型在训练数据上的表现以及对新数据的适应能力。 偏差&#xff08;Bias&#xff09; &#xff1a; 偏差是指模型的预测值与…

fetch 封装 文件流下载进度监控-demo

要使用 fetch API 下载文件并监控下载进度&#xff0c;你需要处理响应的 ReadableStream。这里是一个如何封装此功能的基本示例&#xff1a; <script setup lang"ts"> const downloadFileWithProgress async (url, onProgress) > {// 发起 fetch 请求cons…

北斗三号短报文通信终端 | 助力户外无网络场景作业

北斗三号短报文通信终端是一款专为户外无网络场景作业设计的先进通信工具&#xff0c;它依托于中国自主研发的北斗卫星导航系统&#xff0c;为用户在偏远地区或无网络覆盖区域提供了可靠的通信保障。以下是关于北斗三号短报文通信终端的详细介绍&#xff1a; 一、功能特点 北斗…

【Linux系列】tree 命令的实用指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

头歌——机器学习——集成学习案例

第1关&#xff1a;基于集成学习模型的应用案例 任务描述 本次任务我们将会使用银行营销数据集&#xff08;来源于UCI数据集&#xff1a;UCI Machine Learning Repository &#xff09;,该数据集共45211条数据&#xff0c;涉及葡萄牙银行机构的营销活动&#xff0c;通过一些与…

大端和小端存储

在计算机科学中&#xff0c;数据存储的“字节顺序”是指数据的字节在内存中排列的顺序。主要有两种字节序&#xff1a;大端&#xff08;Big Endian&#xff09;和小端&#xff08;Little Endian&#xff09;。 大端字节序 (Big Endian) 大端字节序将数据的高位字节存储在内存…