封装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…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...
