封装Ellipsis组件,亲测使用各种场景
自己封装了Ellipsis组件 基于react+taro,以下是实现代码,分为JSX和CSS文件
JSX代码如下:
import { FC, Fragment, JSX, useState } from 'react';
import { Image, StandardProps, Text, View } from '@tarojs/components';import iconDropDown from '@/assets/icons/icon-dorpdown-primary.svg';
import useBoundingClientRect from '@/hooks/useBoundingClientRect';import './index.less';interface EllipsisProps {rows?: number;/*** 收起节点*/foldRender?: JSX.Element;/*** 是否显示收取按钮*/showFold?: boolean;/*** 展开节点*/unfoldRender?: JSX.Element;/*** 是否显示展开按钮*/showUnfold?: boolean;onChange?: (val: boolean) => void;
}const Ellipsis: FC<EllipsisProps & StandardProps> = ({rows = 1,children,className,showUnfold,unfoldRender,
}) => {const [show, setShow] = useState(false);const [rectAssist] = useBoundingClientRect('#rectAssist', [children]);const [rectActual] = useBoundingClientRect('#rectActual', [children]);const style = {lineClamp: rows,webkitLineClamp: rows,};const showMoreBtn =!show &&showUnfold &&rectActual?.height &&rectAssist?.height &&Number(rectActual?.height) !== Number(rectAssist?.height);return (<Fragment><Viewstyle={{ position: 'absolute', left: 0, top: -999999, opacity: 0 }}className={className}id="rectAssist">{children}</View><ViewclassName={`lineClamp__1 ${className}`}style={!show ? style : { display: 'block' }}id="rectActual">{children}{!!showMoreBtn && (<View className="unfold-wrap" id="unfoldWrap" onClick={() => setShow(true)}>{unfoldRender || (<View className="unfold-btn"><Text>查看更多</Text><Image src={iconDropDown} /></View>)}</View>)}</View></Fragment>);
};export default Ellipsis;
其中useBoundingClientRect 是自定义的hook,代码如下
import React, { useEffect, useState } from 'react';
import Taro, { NodesRef } from '@tarojs/taro';const useBoundingClientRect = (selector: string,deps?: React.DependencyList,
): [rect: NodesRef.BoundingClientRectCallbackResult | undefined] => {const [rect, setRect] = useState<NodesRef.BoundingClientRectCallbackResult | NodesRef.BoundingClientRectCallbackResult[]>();useEffect(() => {Taro.nextTick(() => {Taro.createSelectorQuery().select(selector).boundingClientRect((respRect) => {setRect(respRect);}).exec();});}, [...(deps || [])]);return [rect as any];
};export default useBoundingClientRect;
Css代码如下,目前在项目中使用less预编译处理器
.lineClamp(@row) {display: -webkit-box;overflow: hidden;line-clamp: @row;-webkit-line-clamp: @row;-webkit-box-orient: vertical;position: relative;
}.lineClamp__1 {.lineClamp(1);&::after {color: red;position: absolute;right: 0;bottom: 5px;}
}.lineClamp__2 {.lineClamp(2);
}.lineClamp__3 {.lineClamp(3);
}.unfold-wrap {position: absolute;right: 0;bottom: 0;display: flex;background: linear-gradient(to left, #fff, #fff, #fff, rgba(255, 255, 255, 0.4));
}.unfold-btn {display: flex;flex-direction: row;align-items: center;min-width: 32px;padding: 4px 10px 4px 30px;line-height: 1;text {color: #b89962;font-size: 12px;font-style: normal;font-weight: 400;line-height: 12px; /* 100% */}image {width: 13px;height: 12px;}
}
效果如下:


相关文章:
封装Ellipsis组件,亲测使用各种场景
自己封装了Ellipsis组件 基于reacttaro,以下是实现代码,分为JSX和CSS文件 JSX代码如下: import { FC, Fragment, JSX, useState } from react; import { Image, StandardProps, Text, View } from tarojs/components;import iconDropDown fr…...
Kendo UI for jQuery,一个现代的jQuery UI组件!
Kendo UI for jQuery是什么? Kendo UI for jQuery是完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现代Web应用程序所需要的工具,从多个UI组件中选择,并轻松地将它们组…...
C++初阶语法——类和对象
前言:C语言中的结构体,在C有着更高位替代者——类。而类的实例化叫做对象。 本篇文章不定期更新扩展后续内容。 目录 一.面向过程和面向对象初步认识二.类1.C中的结构体2.类的定义类的两种定义方式 3.类的访问限定符及封装访问限定符说明 4.类的实例化对…...
linux学习(进程创建)[8]
创建进程 myproc.c #include <stdio.h> #include <unistd.h>int main() {printf("我是父进程\n");pid_t id fork();if(id < 0){printf("创建子进程失败\n");return 1;}else if(id 0){while(1){printf("我是子进程: pid…...
Linux基础与应用开发系列九:各类系统函数
open_close函数 OPEN函数 头文件: #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> 函数原型: 当文件存在时 int open(const char* pathname,int flags) 当文件不存在时 int open (const char* pathname,int f…...
国产数据库排行
目录 一、理论 1.国产数据库排行 2.数据 一、理论 1.国产数据库排行 (1)墨天轮榜单 墨天轮国产数据库流行度排行于2019年6月推出,通过近50个维度的数据来考察近300个国产数据库的流行度排行,每月1日更新排行数据,…...
数学符号说明——三角等号(≜)
三角等号 ,LaTex语法宏 (\triangleq),Unicode(U225C),又称 "delta equal to(Δ 等)"。可以读作 "等于"、"根据定义 x 等于 y "。 有时候,用在数学(和物理学)的某种定义中。例如&#…...
健启星|医学营养的市场先行者
随着《“健康中国2030”规划纲要》、《国民营养计划(2017-2030年)》等政策的陆续发布,标志着以传统药物治疗为中心的医疗模式时代正式转型到以预防和康复为中心的新的医学营养时代。在此背景下,符合时代需求的特医食品成为“医学营…...
从 GPT4All 体验 LLM
推荐:使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 什么是 GPT4All? 术语“GPT”源自 Radford 等人 2018 年论文的标题“通过生成预训练提高语言理解”。本文描述了如何证明变压器模型能够理解人类语言。 从那时起,许多人尝试使用转…...
QGraphicsView实现简易地图4『局部加载-地图漫游』
前文链接:QGraphicsView实现简易地图3『局部加载-地图缩放』 当鼠标拖动地图移动时,需要实时增补和删减瓦片地图,大致思路是计算地图从各方向移动时进出视口的瓦片坐标值,根据变化后的瓦片坐标值来增减地图瓦片,以下将…...
ubuntu 安装 nvidia 驱动
ubuntu 安装 nvidia 驱动 初环境与设备查询型号查询对应的驱动版本安装驱动验证驱动安装结果 本篇文章将介绍ubuntu 安装 nvidia 驱动 初 希望能写一些简单的教程和案例分享给需要的人 环境与设备 系统:ubuntu 设备:Nvidia GeForce RTX 4090 查询型…...
探索APP界面布局的艺术与技巧:从入门到精通
引言 在当今数字化时代,移动应用程序(APP)成为人们生活中不可或缺的一部分。而一个成功的APP界面布局是吸引用户、提升用户体验的关键因素之一。本文将带您深入探索APP界面布局的艺术与技巧,从入门到精通,让您能够轻松…...
回归预测 | MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门控循环单元多输入单输出回归预测
回归预测 | MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门…...
15.3.2 【Linux】系统的配置文件:/etc/crontab,/etc/cron.d/*
这个“ crontab -e ”是针对使用者的 cron 来设计的,如果是“系统的例行性任务”时, 该怎么办呢?是否还是需要以 crontab -e 来管理你的例行性工作调度呢?当然不需要,你只要编辑/etc/crontab 这个文件就可以。有一点需…...
新版PMP考试中,敏捷是怎么考的?
01新版考试中的敏捷是怎么考的? 接下来说一下大家最为关注的敏捷内容。这次改版后,题目中添加了大量的敏捷题型,总体比重还是很高的,主观感觉达到了1/3。但和ACP认证相比,PMP中对敏捷管理技术的考察相对来说比较简单&…...
uniapp-----封装接口
系列文章目录 uniapp-----封装接口 uniapp-----分包 文章目录 系列文章目录 uniapp-----封装接口 uniapp-----分包 文章目录 前言 一、技术 二、封装步骤 1.准备 编辑 2.代码填充 request.js: api.js: min.js 页面使用 总结 前言 uniapp的主包要求大…...
[oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CSI
光标位置 回忆上次内容 上次了解了 新的转义模式 \033 逃逸控制字符 escape 这个字符 让字符串 退出标准输出流进行控制信息的设置 可以设置 光标输出的位置 ASR33中的ALT MODE 是 今天的ESC键吗????🤔 查询文档…...
第十六次CCF计算机软件能力认证
第一题:小中大 在数据分析中,最小值最大值以及中位数是常用的统计信息。 老师给了你 n 个整数组成的测量数据,保证有序(可能为升序或降序),可能存在重复的数据。 请统计出这组测量数据中的最大值、中位数以及最小值&am…...
关于Postman如何配置随请求携带token
文章目录 一些吐槽实际应用 一些吐槽 首先吐槽一下 postman官网的文档说明,真是乱七八糟,一点都不清晰,能不能好好写用户手册啊(比如把用户都当作初始小白) 然后吐槽一下网上铺天盖地让我写js脚本应用全局access toke…...
逆向破解学习-登山赛车
试玩 课程中的内容 Hook代码 import de.robv.android.xposed.XC_MethodHook; import de.robv.android.xposed.XposedHelpers; import de.robv.android.xposed.callbacks.XC_LoadPackage;public class HookComYoDo1SkiSafari2TXYYB_01 extends HookImpl{Overridepublic String p…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
