Vue - 多行文本“展开、收起”功能

TextClamp

使用 js 实现文本展开、收起,并非纯 CSS 实现。

Props:

  • fontSize:Number,默认:14
  • lines:Number,默认:1
  • lineHeight:Number,默认:20

Feat:

  • 监听插槽的变化(文本内容的变化),自动计算文本高度
  • 展开、折叠时有 transition 效果
  • 文本内容较少时(未超过行数 lines),不会展示按钮

Code

text-clamp.vue

<template><div class="text-clamp"><div class="text" :style="{height}"><span v-if="isVisible" class="btn" @click="toggle">{{isExpand ? '收起' : '... 展开'}}</span><div ref="textRef" :style="commonStyle"><slot /></div></div></div>
</template><script>
export default {name: "TextClamp",props: {fontSize: {type: Number,default: 14},lines: {type: Number,default: 1},lineHeight: {type: Number,default: 20},selectors: {type: String,default: ""}},data () {return {isExpand: false,isVisible: false,textHeight: 0}},computed: {height () {if (this.isExpand) {return this.$refs.textRef.clientHeight + 'px';} else {return Math.min((this.lines * this.lineHeight), this.textHeight) + 'px';}},commonStyle () {return {lineHeight: this.lineHeight + 'px',fontSize: this.fontSize + 'px',}}},mounted () {this.init();// 监听插槽变化const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.type === "characterData") {this.init();}});});observer.observe(this.$refs.textRef, {characterData: true,subtree: true,childList: true});},methods: {init () {this.isExpand = false;this.textHeight = this.$refs?.textRef?.clientHeight || 0;this.isVisible = this.textHeight > this.lines * this.lineHeight;},toggle () {this.isExpand = !this.isExpand;if (!this.isExpand && this.selectors) {const initEl = document.querySelector(this.selectors);setTimeout(() => {initEl.scrollIntoView({behavior: 'smooth',block: 'start',inline: 'center'});}, 97)}}}
}
</script><style lang="scss" scoped>
.text-clamp {display: flex;overflow: hidden;
}
.text {font-size: 20px;transition: 0.3s height;
}
.text::before {content: "";height: calc(100% - 20px);float: right;
}
.btn {float: right;clear: both;font-size: 12px;line-height: 14px;padding: 2px 6px;background: #1890ff;border-radius: 2px;color: #fff;cursor: pointer;
}
</style>

实例

<div style="min-height: 120px;"><text-clamp :lines="6">123123</text-clamp>
</div>
<text-clamp :lines="5" :line-height="24">{{data || "--"}}</text-clamp>

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

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

相关文章

双碳管理系统任务需求分析(第10套)

需求规格说明书 一、引言 &#xff08;一&#xff09;项目背景 编写本需求规格说明书的目的是为了详细呈现碳足迹产品需求和系统的功能描述&#xff0c;以进一步定制应用软件系统开发的细节问题&#xff0c;便于与项目开发协调工作。本文档面向的读者主要是项目委托单位的管…

vivado 管理宏

管理宏 宏存储为XDC约束。根据定义&#xff0c;它们是Tcl命令。这允许要在XDC约束文件和Tcl脚本中使用并交互使用的宏。宏是使用write_xdc命令编写的。使用read_xdc读取宏命令-cell选项可用于将作用域限制为特定的单元格。-cell选项特别适用于将一个宏的相对放置应用到不同层次…

4.快速实现增删改查,模糊查询功能

打开springboot项目&#xff0c;在com.example下建包common,在common下新建Result.java 4.1封装统一的返回数据结构 1.在Result.java中编写如下代码&#xff1a; private static final String *SUCCESS*"0"; private static final String *ERROR*"-1"; p…

ROS学习笔记(8)进一步深入了解ROS第二步

0.前提 在上一讲中我提到过该系列是基于宾夕法尼亚大学工程学院的ROS公开课&#xff0c;系列文章将来源于公开课中的课后习题。该系列可以很好的帮助大家更加深入的了解ROS的一些概念。&#xff08;有效面对HR的提问。&#xff09; 1. (C)What is a nodehandle object? Can we…

项目经验简单总结

引擎 unity 2020 语言 C# lua python(用于工具链) java (用于SDK对接) js&#xff08;PC WEB SDK对接&#xff09; 编辑器 VS VSCODE IDEA eclipse 项目开发模块规划分 主项目工程&#xff0c;UI资源项目工程&#xff0c;模型场景资源项目工程 主项目工程&#xff1a;所有的…

Excel模板填充:从minio上获取模板使用easyExcel填充

最近工作中有个excel导出的功能&#xff0c;要求导出的模板和客户提供的模板一致&#xff0c;而客户提供的模板有着复杂的表头和独特列表风格&#xff0c;像以往使用poi去画是非常耗时间的&#xff0c;比如需要考虑字体大小&#xff0c;单元格合并&#xff0c;单元格的格式等问…

vue-打包

打包的作用 说明&#xff1a;vue脚手架只是开发过程中&#xff0c;协助开发的工具&#xff0c;当真正开发完了>脚手架不参与上线 打包的作用&#xff1a; 1&#xff09;将多个文件压缩合并成一个文件 2&#xff09;语法降级 3&#xff09;less sass ts语法解析 打包后…

liunx操作系统基础及进阶

一、基础入门 1、Linux系统简介 什么是Liunx&#xff1f; Linux在设计之初&#xff0c;是一个基于POSIX的多用户、多任务并且支持多线程和多CPU的操作系统&#xff0c;它是由世界各地成千上万的程序员设计和开发实现&#xff1b; 在当今社会&#xff0c;Linux 系统主要被应…

【智慧零售】东胜物联蓝牙网关硬件解决方案,促进零售门店数字化管理

依托物联网&#xff08;IoT&#xff09;、大数据、人工智能&#xff08;AI&#xff09;等快速发展&#xff0c;数字化和智能化已成为零售企业的核心竞争力。更多的企业通过引入人工智能、大数据等先进技术手段&#xff0c;提高门店运营效率和服务质量。 某连锁咖啡企业牢牢抓住…

[嵌入式C][入门篇] 快速掌握基础(9个语句)

开发环境&#xff1a; 网页版&#xff1a;跳转本地开发(Vscode)&#xff1a;跳转 文章目录 一、基础语法&#xff08;1&#xff09;if (如果)示例1: 普通使用 if示例2: 带否则 else示例3: 否则如果 else if &#xff08;2&#xff09;switch case (选择)规则示例1: &#xff0…

谷歌浏览器 模拟定位

注意事项&#xff1a; 如果要清除位置信息&#xff0c;需将Geolocation修改为No override模拟定位之后需要刷新页面&#xff0c;网页才会生效如果模拟定位&#xff0c;一段时间没有操作&#xff0c;就会清空模拟定位&#xff0c;类似于No override

ubuntu远程桌面连接之novnc

一、前言 该操作是为了实现vnc桌面连接为url连接方式&#xff0c;且在浏览器中可以对ubuntu进行操作。在使用novnc进行操作前&#xff0c;需要先安装vnc才可。ubuntu下如何安装vnc&#xff0c;可看博主前面写的一篇文&#xff0c;ubuntu远程桌面连接之vnc-CSDN博客&#xff0c;…

案例074:基于微信小程序的儿童预防接种预约管理系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder …

物流实时数仓:数仓搭建(DWS)一

系列文章目录 物流实时数仓&#xff1a;采集通道搭建 物流实时数仓&#xff1a;数仓搭建 物流实时数仓&#xff1a;数仓搭建&#xff08;DIM&#xff09; 物流实时数仓&#xff1a;数仓搭建&#xff08;DWD&#xff09;一 物流实时数仓&#xff1a;数仓搭建&#xff08;DWD&am…

22款奔驰GLE450升级香氛负离子 车载香薰

相信大家都知道&#xff0c;奔驰自从研发出香氛负离子系统后&#xff0c;一直都受广大奔驰车主的追捧&#xff0c;香氛负离子不仅可以散发出清香淡雅的香气外&#xff0c;还可以对车内的空气进行过滤&#xff0c;使车内的有害气味通过负离子进行过滤&#xff0c;达到车内保持清…

神经网络:经典模型热门模型

在这里插入代码片【一】目标检测中IOU的相关概念与计算 IoU&#xff08;Intersection over Union&#xff09;即交并比&#xff0c;是目标检测任务中一个重要的模块&#xff0c;其是GT bbox与pred bbox交集的面积 / 二者并集的面积。 下面我们用坐标&#xff08;top&#xff0…

Oracle导出CSV文件

利用spool spool基本格式&#xff1a; spool 路径文件名 select col1||,||col2||,||col3||,||col4 from tablename; spool off spool常用的设置&#xff1a; set colsep ;    //域输出分隔符 set echo off;    //显示start启动的脚本中的每个sql命令&#xff0c;缺…

ROS学习记录:在ROS中用C++实现激光雷达避障

前言 本文建立在成功获取激光雷达数据的基础上&#xff0c;详细参考 在ROS中用C实现获取激光雷达的数据 一、实现思路 二、在VScode中打开之前编写好的lidar_node.cpp 三、在lidar_node.cpp中写入如下代码 #include <ros/ros.h> #include <std_msgs/String.h> …

k8s---pod的生命周期

pod的相关知识 pod是k8s中最小的资源管理组件 pod也是最小化运行容器化的应用的资源管理对象 pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合。 k8s中pod的两种使用方式 &#xff08;1&#xff09;一个pod中运行一个容器。"每个po中一个容器&…

知虾会员**成为知虾会员,尊享专属权益**

在当今繁忙的生活中&#xff0c;线上购物已经成为现代人们的主要消费方式之一。而作为线上购物平台的领军者之一&#xff0c;Shopee为了提供更加个性化和便利的购物体验&#xff0c;推出了知虾会员&#xff08;Shopee会员&#xff09;服务。知虾会员不仅可以享受到一系列会员专…